Hero components

Usage

Use a hero banners to:

• introduce and give context to the product or service
• communicate and drive users to a specific call to action
• present an overview of the page’s most important content or primary message

Do:

• only use on a home page or category/landing page. Overuse may decrease their effectiveness and lead to ‘banner blindness.’
• use simple and concise messaging
• use clear call to actions that aligns to the message or task
• only use images where they add value to the content and support the message

When to avoid

Do not use:

• to replace titles on content pages, instead use H1 typography styles via the Title Block component
• for sites or products where the primary navigation of your users is via search, consider Hero Search

Building heros

Heros layout UI elements to communicate a focused message. They should feature a primary message and/or call to action, and can be accompanied by supporting content such a images or graphics.

Our base component shows example layouts, and are designed to adapt to your content. If these do not meet your user needs (ie. content type or layout), you can use the foundational elements of the design system to build your own in a similar style.