Description
The Hero Tease component presents a large visual format to tease an HBS story or other editorial piece. Much or all of the tease content will be pulled from the story itself.
- Alignment Options: full
- Color Themes: light, dark, white, crimson, purple, blue, red, black
- Visible Content Fields: title, subtitle, topic overline, attribution, image
- Instances per Page: none to multiple
How it Works
- Content editors pick a layout and a story to tease
- Overline category, title, subheading, attribution, and image is pulled from the story chosen
Images
| Aspect Ratio (recommended) | Width (proportional) | Height (proportional) | Scaling Behavior |
|---|---|---|---|
| 16:9 (~3:2 viewable) | 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
id: CB-007-003-00
data-region: cb__hero-tease__card
Flat Stacked Style
id: CB-007-005-00
data-region: cb__hero-tease__flat-stacked
Flat Side-By-Side Style
id: CB-007-004-00
data-region: cb__hero-tease__flat-side-by-side