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