Hero
Highlight a primary message or page identity at the top of a page
This component creates a strong visual introduction, helping users immediately understand the purpose or focus of a page.
Example page context showing where a Hero is typically used
✓ Use this component when:
- You need a strong visual introduction at the top of a page
- A page has a single, clear primary focus
- An image meaningfully reinforces the message
- You want to establish tone, theme, or context immediately
✕ Avoid using this component when:
- The page contains multiple equal priorities
- You need dense or highly scannable content at the top
- The image is decorative and does not add context
- The primary goal is navigation (use Button-Style Cards or CTA Links)
Choosing between similar components
If your goal is…
| Your goal | Use this component |
|---|---|
Create a strong visual headline | Hero |
Feature one story, event, or initiative | 50/50 Card |
Provide quick links or actions | Button-Style Cards |
Emphasize a next step | Call to Action Links |
Hero overview
A Hero component is a banner element that displays an image and information at the top of a page. Heroes are often used on home pages and landing pages to highlight important stories and other website content.
Example: Introducing a page’s primary focus
This example shows a Hero used to introduce a page with a clear, central focus. The image reinforces the theme, and the heading communicates the main message immediately.
Early printing exhibits
Learn the history and technology of printing from moveable type.
Elements of a Hero
| Element | Purpose |
|---|---|
Image | Displays as background image |
Eyebrow | Describes the topic category |
Heading | Describes the topic of the Hero |
Text | Provides descriptive details about the topic |
Call to action links | Links to more details about the topic |
Pagination | Provides controls to navigate multiple Hero items |
Guidance on using a Hero
Use for site and page orientation. Use a Hero as a banner at the top of a homepage or section landing page to orient users to the purpose of the site and site sections.
Include relevant and compelling imagery. Highlight compelling images that reinforce the site identity and purpose.
Use high-resolution images. Use high-resolution images that fit well within the Hero aspect ratio.
Use static images. Don’t use an animated image or video for the Hero image.
Don’t use images that include text. Instead, use the text panel to provide text content.
Leave space for text. When including text, use an image that allows space for the text panel. Don’t cover main elements of the Hero image with the text panel.
Optimize text contrast. Use a solid background for the text panel and a high-contrasting text color.
Use clear language. Use short, concise, and active language in the Hero text.
Include calls to action. Use call-to-action links when appropriate, to provide a path to more details.
Content guidelines
Write concise headings
Headings should clearly communicate the page’s primary focus.
Keep supporting text brief
Provide only essential context beneath the heading.
Use meaningful calls to action
If included, ensure the CTA aligns with the page’s primary goal.
Ensure visual contrast
Text must remain legible against background imagery.
Accessibility considerations
- Ensure sufficient color contrast between text and background
- Avoid placing essential text directly over complex imagery
- Provide descriptive alternative text for images
- Ensure keyboard and screen reader accessibility for any included CTAs
Hero features
| Features | Standards |
|---|---|
No support for animated images or video | Static Backgrounds |
Solid background for text panels | Solid Backgrounds |
Optimized color contrast | Minimum Contrast |
Left-aligned headings and text | Text Block Alignment |
Background color, icons, and underlining used to indicate links | Link Indicators |
Sans serif typeface used for CTA links | Wayfinding Font |
Design Research
Learn about our exploration into the implications of autoplaying background videos and animations, and how those insights inform the Restricted Motion standards and guidelines.
Hero component: Styles, sizes, and best practices
This video explains the different hero layout options and best practices for using hero components.
Hero Showcase
This example shows the Hero component with the text card in a full-width panel below the image.
Exhibits and workshops in early printing
Learn the history and technology of printing from moveable type, set type, and a operate a handpress to print a keepsake.
This example shows the Hero component with the text card floating on top of the image. Note that the text card displays below the image on mobile.
Exhibits and workshops in early printing
Learn the history and technology of printing from moveable type, set type, and a operate a handpress to print a keepsake.