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, purple, blue, 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
3:2Fixed*Fixed*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

data-region: cb__hero-statement__card__button

Explore in Storybook

with LinkList

data-region: cb__hero-statement__card__linklist

Explore in Storybook

with no CTA

data-region: cb__hero-statement__card__text-only

Explore in Storybook

with Quote

data-region: cb__hero-statement__card__quote

Explore in Storybook

with Kaltura Video

data-region: cb__hero-statement__card__kaltura

Explore in Storybook

Flat Style

with Button

data-region: cb__hero-statement__flat__button

Explore in Storybook

with LinkList

data-region: cb__hero-statement__flat__linklist

Explore in Storybook

with no CTA

data-region: cb__hero-statement__flat__text-only

Explore in Storybook