B01 Hero Banner is a prominent visual component featuring a large background image, short headline or intro copy layered on top, and up to two CTAs. Ideal for high-impact messaging at the top of a page.

Component requirements

Required:

• Heading: Text field. Heading is always set as H1.
• Background image: Media asset. Allows user to choose a visual element that will sit in the background and span full width of the page.

Optional:

• Support copy: Rich text field. Allows users to add additional content.

• First CTA button: Text field along with associated link type (internal/external/anchor/email/phone).

• Second CTA button: Text field along with associated link type (internal/external/anchor/email/phone).

• Mobile background image: Override which on a mobile device (or resolutions under 600px wide) allows to replace desktop image with another image.

• Hide image on mobile: Checkbox. Default: Unchecked.

• Left align on mobile: Checkbox. Allows content to be aligned to levs vs center. Default: Unchecked.

• Background gradient level: 0/20/40/60/80. Allows addition of background color primarily behind content area. Default: 0.

Additional component notes:

• Image container will extend slightly past our default 1440px grid. 
• Image size should be 1920x500. Please reference B1/B2 HERO image template for more information
• While on desktop the text sits on top of the image, below 600px text shifts below the image.
• As the content is always white color, ensure proper contrast is configured.

Content guidelines

Lorem ipsum.
Lorem ipsum.

ADA requirements

Ensure the image is marked as decorative element.
CTA's need to have a descriptive link text.

Component examples

 
Example #1: Showing example of B1 HERO banner in which headline is enabled, support copy is disabled and only first CTA is enabled. Mobile override is disabled (separate mobile image). Background shadow level set to 40%.

 
Example #2: Showing example of B1 HERO banner in which headline is enabled, support copy is enabled and both CTAs are disabled. Mobile override is disabled (separate mobile image). Background shadow level set to 60%.

 
Example #3: Showing example of B1 HERO banner in which headline is enabled, support copy is enabled and both CTAs are enabled. Mobile override is enabled (separate mobile image). Background shadow level set to 80%.