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 guidelines

Lorem ipsum.
Lorem ipsum.

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.