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 |
|---|---|---|---|
| 16:9 | Fixed* (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
with LinkList
id: CB-006-003-02
data-region: cb__hero-statement__card__linklist
with no CTA
id: CB-006-003-03
data-region: cb__hero-statement__card__text-only
with Quote
id: CB-006-003-04
data-region: cb__hero-statement__card__quote
with Kaltura Video
id: CB-006-003-05
data-region: cb__hero-statement__card__kaltura
Flat Style
with Button
id: CB-006-004-01
data-region: cb__hero-statement__flat__button
with LinkList
id: CB-006-004-02
data-region: cb__hero-statement__flat__linklist
with no CTA
id: CB-006-004-04
data-region: cb__hero-statement__flat__text-only