B02 HERO Banner carousel

B02 Hero Banner Carousel component is a large, rotating visual space that supports up to three images. Each slide includes a background image, brief content, and up to two CTAs layered on top. Ideal for highlighting multiple messages or campaigns in a single prominent area 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:

  • Play/pause controls and pagination are dynamically generated by the component.
  • 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

This component is only used on care delivery brand website homepages. At least two slides must be present. Best practice is having up to three slides. Four slides should be used sparingly. See care delivery brand homepage example.

Writing H1

  • The H1 for each banner slide should be brief and descriptive.
  • 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.

ADA requirements

  • Ensure the images are marked as decorative elements.
  • CTA's need to have a descriptive link text.
  • Meets all standard accessibility requirements, including keyboard navigation and screen reader support.

   

Component examples

For visual examples, please refer to the B01 Hero Banner component.