Jumbotrons

A simple but effective hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

This is called a Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Custom html

the above example is created using the following code in a Custom HTML block:

<div>

<h3 class="hero-title"><div>This is called a Jumbotron</div></h3>

<p></p><div><p><span>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.</span></p></div>

<p><a href="https://vet.ed.ac.uk/test-area/custom-html/jumbotrons">Use custom html to make your own</a></p>

</div>

This is also called a Jumbotron

this is an example of a link

Custom html

the above example is created using the following code. Note the path of the image in bold below - to change the image, locate the image you wish to use - copy the full URL including the 'https://' and paste in between the ().

<div>

<div class="paragraph paragraph--type--jumbotron-card paragraph--view-mode--default hero-content hero-content-brand hero-content-left"><h3 class="hero-title"><div>This is also called a Jumbotron</div></h3>

<p><a href="https://vet.ed.ac.uk/test-area/custom-html/jumbotrons">this is an example of a link</a></p></p>

</div>

This article was published on 2025-05-23