Audience Banner

Introduction

The Audience Banner is a highly visual banner with several flexible features. It is a full width component that is only used at the page level. This is a Unum specific banner.

When to use

The audience page banner is used at the top of main level pages for a highly visual introduction to a page. It includes an image that sits flush with the bottom of the banner container and a placeholder that allows a New Content Component. 

Component properties

Theme:

  • Light 
  • Dark 

For the background color, all standard approved background colors are available: 

  • Unum – Dark – Unum Blue D1 – 004470
  • Unum – Dark – Unum Blue L3 – 3273AF
  • Unum – Dark – Unum Slate 5 – 325E7A
  • Unum – Dark – Unum Slate 6 – 26485F
  • Unum – Light – Unum Blue 2 – EFF3F6
  • Unum – Light – Unum Blue 3 – B9D4E9
  • Unum – Light – Slate 2 – E6EEF5
  • Unum – Light – Pool 2 – E4F4F4

Decorative bar: color options available soon

Vertical spacing: The vertical spacing controls increase or decrease the amount of spacing at the top of the item being changed. Currently our standard spacing is 112px.

Spacing control options are:

  • Extra Small – Mobile: 16px | Tablet: 24px | Desktop: 32px
  • Small – Mobile: 24px | Tablet: 40px | Desktop: 48px
  • Medium – Mobile: 32px | Tablet: 56px | Desktop: 64px
  • Large – Mobile: 40px | Tablet: 72px | Desktop: 88px
  • Extra Large – Desktop: 112px

Note: the spacing values you will see in the Sitecore dropdown field are the Desktop pixel values.

Frame(s):

This is a full width component so it is not placed within any frames.

Placeholder(s):

The banner includes one placeholder for the text of the banner. That placeholder will only allow a New Content Component.

Sitecore field(s):

This banner has the following fields:

  • Eyebrow heading
  • Dash line: color options are pool, gold, lawn, Unum blue (optional)
  • Heading
  • Description
  • Primary CTA
  • Secondary CTA
  • Half width and mobile specific image options (You will see a full width image field in Sitecore but it will not work.)

Required field(s):

Both the heading and description fields are required for this component as well as a half width image.

Additional information

List of background color options as of December 1, 2021

Light swatches

Unum light swatches

Dark swatches 

Unum dark swatches

Image specs

Half width image only; image position cannot be adjusted 

  • 1450x1440 for desktop image
  • 1200x600 for mobile image 
 

Spacing

The spacing for the audience banner heading and sub heading are standard just like the Content Image Banner.

Example

See example of audience banner below: