Anatomy
The Hero is built from a few core elements that stay consistent across all variants: an optional breadcrumb, a title, a subtitle, an optional button or link, and the image area. Together, these parts create a clear page introduction and help guide the user into the content below.
|
# |
Element type |
Element name |
Element description |
|---|---|---|---|
|
1 |
Media |
Hero image |
The visual area that adds context, emotion, or brand storytelling to the page. |
|
2 |
Navigation |
Breadcrumb |
Optional navigation path that helps users understand where they are in the website structure. |
|
3 |
Text |
Hero title |
The main page heading that introduces the page and sets the hierarchy. |
|
4 |
Text |
Hero subtitle |
Supporting text that gives extra context or explains the purpose of the page. |
|
5 |
Action |
CTA button or link |
Optional action element used to guide users to the next step or key task. |
Tiers
The Hero supports three presentation tiers:
- Landing
- Default
- Text-only
These tiers range from the highest visual impact for homepage and campaign pages to the lowest impact for in-depth and content-focused pages.
1. Landing
The highest-impact tier, designed for homepage, campaign, and storytelling pages. Use it when the page needs a strong visual introduction and immediate emotional impact.
2. Default
A balanced tier for product, information, and service pages. Use it when the page needs visual context while keeping the focus on clarity and page content.
3. Text-only
The lowest-impact tier, designed for in-depth and content-focused pages. Use it when readability, fast scanning, and content hierarchy are more important than visual storytelling.
Do’s and don’ts
Keep text short and place it in a safe area. Text should never cover more than half of the image.
Keep text short and place it in a safe area. Text should never cover more than half of the image.
Place text in a safe area where faces and key visual details remain visible.
Do not place text over faces or important visual details.
Move from higher tiers to lower tiers as users go deeper into the page flow. Homepages start with Landing, then Default, and optionally Text-only when the focus shifts to content and detail.
- Tier 1: Landing
- Tier 3: Text only
Do not use a higher tier after a lower tier in the user flow. Avoid moving from Text-only back to Default or Landing, as this breaks the visual hierarchy.
- Tier 3: Text only
- Tier 1: Landing
Safe zone
Hero with text overlay
For Hero images with text overlay, keep a clear safe zone for text placement. Titles, subtitles, and actions should not cover more than half of the image. Avoid placing important details like faces or key focal points in this area to keep the image clear across all screen sizes.
Hero with text overlay and overlap
With overlap enabled, the first content block overlaps the Hero image by 80 px, creating a stronger connection between the Hero and the page content below.
Hero image only
For image only Heroes, the full image is visible without a text zone. This allows more space for the visual and greater flexibility for focal points.
