Hero Statement

Description

The Hero Statement component features a large message with one or more links and a large accompanying image or video.

  • Alignment Options: full
  • Color Themes: light, dark, white, crimson, lavender, skyblue, red, black
  • Visible Content Fields: title, subtitle, image or video, quote and attribution, CTA links
  • Instances per Page: none to multiple

How it Works

  • Content editors select a message
  • Content editors select an image or video
  • Links are optional

Images

Aspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
16:9Fixed* (left and right sides will be cropped off of 16:9 image; part of image that shows is ~3:2)Fixed*Left and right sides of a 16:9 image will always be cropped off (actual proportion is ~3:2).

Text block covers increasing amount of lower-left section of image as browser width decreases.

*Images will auto-crop based on the limiting dimension.

Examples

Card Style

with Button

id: CB-006-003-01
data-region: cb__hero-statement__card__button

Explore in Storybook

with LinkList

id: CB-006-003-02
data-region: cb__hero-statement__card__linklist

Explore in Storybook

with no CTA

id: CB-006-003-03
data-region: cb__hero-statement__card__text-only

Explore in Storybook

with Quote

id: CB-006-003-04
data-region: cb__hero-statement__card__quote

Explore in Storybook

with Kaltura Video

id: CB-006-003-05
data-region: cb__hero-statement__card__kaltura

Explore in Storybook

Flat Style

with Button

id: CB-006-004-01
data-region: cb__hero-statement__flat__button

Explore in Storybook

with LinkList

id: CB-006-004-02
data-region: cb__hero-statement__flat__linklist

Explore in Storybook

with no CTA

id: CB-006-004-04
data-region: cb__hero-statement__flat__text-only

Explore in Storybook