B03 HERO Featured banner

B03 Hero Featured Banner (corporate theme only) is a large, attention-grabbing banner with a background image and centered text at the bottom, featuring a main headline and an optional byline (above or below the headline).

 

Component requirements

Required:

  • Heading: Rich 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.
  • First CTA: Text field along with associated link type (internal/external/anchor/email/phone).
  • Gradient: Dropdown. 0/20/40/60/80. Allows addition of background color behind content area. Default: 0.
  • First CTA Style: Dropdown. Default/White. Default: default (corporate blue).
  • Second CTA Style: Dropdown. Default/White. Default: default (corporate blue).

Optional:

  • Tagline top: Text field. Allows users to add additional content above headline.

  • Tagline bottom: Text field. Allows users to add additional content below headline.

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

  • First CTA icon: Dropdown. Allows selection of a predefined icon from our internal library, which appears to the right of the button label.

  • Second CTA icon: Dropdown. Allows selection of a predefined icon from our internal library, which appears to the right of the button label.

  • Mobile background image: Media asset. Allows user to choose a visual element that will sit in the background and span full width of the page.

Additional component notes:

  • Available on the corporate theme only.

 Content guidance

This component is currently used on the corporate website homepage.

Writing H1

  • The H1 on the corporate website is the name of the enterprise, Advocate Health.

Support copy

  • Support copy above and below the H1 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.

ADA requirements

  • Ensure text on images meets WCAG contrast requirements.
  • Use descriptive link text for all CTAs.
  • Mark images as decorative when they don’t convey meaningful content.
  • Provide ARIA attributes on modal links to support descriptive functionality and enable proper open/close behavior.