Hero component alternatives
Replace multi-item Hero components with focused page components
The Hero component works best when it introduces one clear message at the top of a page.
If your page currently uses a multi-item Hero, keep the strongest message in the Hero and move any additional stories, actions, links, or images into other components on the page.
This guide helps you choose the right component for content that previously appeared in additional Hero items.
When to use a hero component
Use the Hero when the page has one primary message, story, or identity. A good Hero helps visitors quickly understand the focus of the page.
The Hero is a good fit when you need:
- A strong visual introduction at the top of a page.
- One clear page focus.
- An image that meaningfully supports the message.
- One to three calls to action that relate directly to the main message.
Avoid using the Hero when your page has several equal priorities, when the main goal is navigation, or when the content needs to be dense and easy to scan.
Before and after: Replacing a multi-item Hero
Replace multi-item Hero components with a single, focused Hero and purpose-built components below. This makes content easier to scan and navigate, especially on mobile.
Before: Multi-item Hero
Multiple important items compete for attention. Visitors must interact to see additional content.
Desktop view.
❌ Only one item is visible at a time.
❌ Important content is hidden.
❌ Requires interaction to discover more.
After: Focused components
One clear message in the Hero, with additional content visible and easy to scan.
Desktop view.
✅ One clear, focused message in the Hero.
✅ All key content is visible and scannable.
✅ Easier to navigate, especially on mobile.
Choose the right alternative component
| If your additional Hero item was used to… | Use this component instead | Why |
|---|---|---|
Feature one important story, initiative, event, or program | 50/50 Cards | A 50/50 Card pairs an image with supporting text in a side-by-side layout. It’s designed for one high-priority item rather than several equal items. |
Highlight several equal priorities | Vertical Cards | Vertical Cards display multiple items as a set, each with an image on top and information below. They work well when no single item should dominate the page. |
Provide quick links to related destinations or tasks | Button-Style Cards | Button-Style Cards display an icon or image, a link, and a short description. They’re often grouped in a grid for prominent, scannable navigation. |
Emphasize one or more next steps | Call to Action Links | Call to Action Links are prominent links that guide visitors toward clear next steps. They can display as a list or grid with an optional section heading. |
Show a small group of related photos | Image Collage / Images component | The Image Collage component can display up to three captioned images in different layouts. It’s a better fit than a Hero when the image group itself is the content. |
Let visitors browse a larger collection of related images | Media Gallery | The Media Gallery displays images in a grid. Visitors can select individual images to see a larger version, with optional titles and captions. |