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 guidance

Every webpage uses either the C03 Headline CTA or the B01 HERO banner except for care delivery brand and corporate website homepages. The B01 HERO banner is used on pages with a banner image.

Writing H1

• The H1 should directly and clearly state what the page is about.
• Avoid vague and overly creative phrasing.
• Often the H1 aligns with the page URL, but SEO guidance may require slight adjustments, such as adding keywords. See pediatric heart page example.
• In general, use sentence case for H1. This means capitalize only the first word of the sentence and words that would normally be capitalized, such as a hospital name. Some exceptions to use title case include creative brand copy treatments.

Support copy

• Support copy can vary from a short line of descriptive text to a longer explanatory sentence.
• Be sure to end support copy with punctuation.

CTA button copy

• For the CTA button copy, use sentence case.
• CTAs should be descriptive and clearly state what action users should take. Don’t use general phrases such as “click here” or “read more.”
• CTAs should be kept to 30 characters or fewer.
• If there’s no CTA, the optional category would be left blank.  

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%.