Hero Landing
Component Overview
The Hero Landing is the primary hero that is used for landing pages. This hero lets you have a large photo along with 'eyebrow' text, a title, body copy, and a link. This is one of the most versatile components and is a critical hero to have in your toolbox.
Component Location
Hero → Hero Landing
Component Overview
Supported Templates & Placeholders
| Template | Placeholder |
|---|---|
| Article Detail Page |
/maincontent/hero-content
|
| Detail Page |
/maincontent/detail-page-nav/hero-content
|
| Experience Landing with Nav |
/maincontent/hero-content
|
| Experience Landing Page |
/maincontent/hero-content
|
| Experience Interior Nav |
/maincontent/interior-nav-content
|
| Experience Right Rail Page |
/maincontent/hero-content
|
Recommended Image Size
1500x1000 @72DPI
Character Limits
Title: 100
Subheading: 100
Body: 280
Links: 50
Component Example
To see how the component will display on different types of screens, select the button below.
Device resolution = 1440px
ABOUT THE COMPONENT
- Component Type: Hero
- Rich Text: No
- Images: Yes
- Video: No
- Buttons: Yes
- Links: Yes
- Icons: No
Special Notes
Contains a built-in image gradient either on the bottom or left that is user-selected in the Details pane.