This information-dense hero component is used to help tell a timely platform story or highlight a campaign initiative, aided by related content items and relevant calls to action.
There is a main panel with a hero image with optional sub-copy and up to 2 CTA buttons. The sidebar contains three featured items each with a linked thumbnail image, title and optional metadata text.
This hero component includes related editorial proof points to help tell a timely platform story or highlight a campaign initiative, with the option to include up to five calls to action, including: two optional CTA buttons and three required sidebar content items. Sidebar items have a thumbnail image, headline and a kicker that describes the content type, and an optional byline and/or date beneath the sub-copy.
**Note: This component can be configured with an optional footer allowing for two additional teaser links with associated iconography. When configured with the footer, the copy block beneath the hero heading will not be displayed.
The entire area of each content teaser item is clickable. Only the optional two CTA buttons in the main hero area are click-able.
Headline: 60 (2 line max)
Hero Copy: 150 (2 line max)
CTA Button(s): 25
Sidebar Item Label: 30
Sidebar Item Copy: 75 (3 line max)
Sidebar Item Date/Author: 40
Footer Item Copy: 80
Asset Size: 1920px x 1080px
Aspect Ratio: 16:9
Recommended File Weight: <200kb
Max Width: 1280px (8 columns)
Height: 344px
Desktop: 5:3
Tablet: 5:2
Mobile: 4:3
Asset Size: 192px x 192px
Aspect Ratio: 1:1
Recommended File Weight: <20kb
Display Width: 96px
Display Height: 96px
Asset Size: 96px x 96px
Aspect Ratio: 1:1
Recommended File Weight: <5kb
Display Width: 48px
Display Height: 48px