Hero Tease

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, lavender, skyblue, 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

Explore in Storybook

Flat Stacked Style

id: CB-007-005-00
data-region: cb__hero-tease__flat-stacked

Explore in Storybook

Flat Side-By-Side Style

id: CB-007-004-00
data-region: cb__hero-tease__flat-side-by-side

Explore in Storybook

Text Only Style

Explore in Storybook