There are a few options for a jumbotron component. You can edit the height, text location, optional button, background and other content. See examples and learn how to add them to your own page below.

Blue Gradient Hero Banner

This jumbotron has a blue gradient background which is added if the image field is blank when you fill out the component.

Image Hero Banner with Overlay

Add an image when filling out the component fields to get this style jumbotron.

Image Hero Banner with Overlay Bar

Select the partial darkening checkbox and enter information for a button when filling out the component fields to get this style jumbotron.

Important Implementation Instructions

If you want your Hero Banner to span the full width of the page (like the one on the top of this page) reach out to the IT Web team. We will add an editable region to the top of the page where you can still edit your Hero Banner if needed. After we have changed your page follow these steps:

1. Click the first green edit button on the page
2. If you already had a Hero Banner component on the page you sent we will add it to the top if not we will just add a sample Hero Banner component you can edit
3. Edit the Hero Banner component and select your options (height, text location, heading/subheading/content/button) and save; please note that "partial darkening" creates a darker bar across the bottom of the image where the text will be placed, not checking this puts a light grey overlay over the entire image (these measures are to ensure accessibility)
4. Save the edits you've made
5. Click the second green edit button on the page and add your content (starting with H2 heading since your H1 heading is in the image overlay
6. Save and publish

There are also options for hero banners as a page layout.

* If you have breadcrumbs on your page the hero banner (like the one on this page) is not an option.