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

Hero banner

with background image

Medium height setting

Eyebrow heading

Background image

with an icon + eyebrow heading

Large height banner

Eyebrow heading

Background color option
This section is a large height with animating arrow option. This section also has centered text as you can see. All light and dark theme background color options are available for use when choosing a background color only option.