A NSW Government website
NSW Government
NSW Design System v3.28.1

Hero banner

The hero banner introduces the goals or purpose of the product or service.

View variants & code Figma

Build better digital services

Clear, consistent and accessible services for people across NSW.

Explore toolkit
Show code Hide code

Usage

Guidance

Do
  • use hero banners to introduce and give context to the product or service
  • use hero banners to communicate and drive users to a specific call to action
  • use hero banners to present an overview of the page’s most important content or primary message
  • use simple and concise messaging
  • use clear calls to action that align with the message or task
Don't
  • use a hero banner on pages other than a home page or category/landing page. Overuse may decrease their effectiveness and lead to ‘banner blindness’
  • use images where they do not add value to the content or support the message
  • use a hero banner to replace the title on a content page; use H1 typography styles instead
  • use a hero banner for sites or products where search is the primary way users navigate; 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.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.