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