1. The banner can be used at the very top of a page (primary) with an <h1> title and two optional CTA buttons or can be used lower down on the page (secondary) with one optional CTA button and an <h2> title.

2. There is an additional body element that can be black or white

3. There are 2 optional CTA's

4. The Title, Body and CTA's can be left or right justified

Image

The size for the hero image is approximately 2000 X 350 with the height varying based on the amount of content.

*Please ensure the image is optimized for the web. File must not be larger than 100KB

Title

1. The title for a hero banner should be title case - upper case on the first letter of each major word

2. The title can be either an <h1> or an <h2> based on where you place the banner on your page

Component elements

Please note all elements with an asterisk next to the element title are required.

Example:

Selecting Primary displays the heading as an H1 and allows for 2 optional CTA's. Selecting Secondary displays the heading as an H2 and allows only 1 optional CTA.

Click Select to add the image. The library selection will pop up. Go to the Global Asset Library and click through to your image location. Select it and click OK. Don't forget to provide alt text for the image. These fields are required.

This field determines the justification for the title, body and CTA's.

Add your title here.

Select the color for the body text.

Enter the text here. .

Both of the CTA's are optional and only one is available if this is a secondary hero banner.

Related Components

Hero Banner

Complementary Content

${loading}