Hero Banner
Introduction
The Hero Banner is a full width component that can be utilized as a showpiece on any page – in any position.
When to use
These banners can be used as full browser window displays, or smaller more subdued banners and comes with a good number of customization options not yet seen in components.
Component properties
Height:
- Small: Dynamic height with an internal padding of 56px top & bottom
- Medium: Dynamic height with a internal padding of 112px top & bottom
- Large: Stretches banner to 100vh
- Large w/ arrow: Arrow animated at bottom of banner
Text alignment:
- Default (Default alignment is left aligned. This is as designed in case we ever change the “default” alignment
- Left
- Center
Theme:
- Light: Dark text
- Dark: Light text
Background color:
- All the available color options for Unum and Colonial Life
Decorative bar:
- All the current available decorative bar colors
Action 1 Display:
- Default – Basic link
- Button – Default button styling
- Ghost Button – Default secondary button styling
Action 2 Display:
- Default – Basic link
- Button – Default button styling
- Ghost Button – Default secondary button styling
Frames
The hero banner is a full width component so is placed at the page level.
Sitecore fields
- Eyebrow text
- Display font: (this is not a heading level element)
- Heading (H1)
- Sub Heading (H2)
- Body heading (H3)
- Description
Image specs
- Images will be a case-by-case basis mainly because content may dictate the background image. Testing will be needed across all breakpoints for the background image.
- The max-width of the display font container is 840px.
Content variations
