A NSW Government website
Design System v3.0.5

Hero banner

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

Figma React

Usage

Use hero banners to:

  • introduce and give context to the product or service
  • communicate and drive users to a specific call to action

Do:

  • use simple and concise messaging
  • use descriptive call to actions so the user is aware of the action they are performing

When to avoid

Do not use:

  • for sites or products with large volumes of content where users may search for a variety of options, consider Hero search
  • for sites or products where the primary navigation of your users is via search, consider Hero Search

Building Hero Banners

Hero banners are made up of foundational and content elements to show information to users. Some examples of these elements are included in our base banner component, and can be adapted to meet user needs. All graphics and content elements in base components are indicative only and are made to be adapted to meet user needs.

Text

Headlines and descriptions can be used to introduce and give context to the service or product.

Call to actions

Call to actions such as buttons and text links can be used to highlight the primary task or piece of information, and allow the user to take quick action.

Graphics

Graphics such as images or illustrations can be used where they add value to the content and support the messaging. Our base Hero banner features a placeholder line graphic made for you to replace with an appropriate graphic for your content.

Test your visual content carefully and ensure:

  • it adds value to the user
  • it is relevant and impactful
  • the focal point remains visible on larger and smaller screens

Dark and light variants

Hero banners can be built by placing your content into a page section, where you can apply background colours from your Brand palette. Styles for Dark and Light variants should be followed depending on your background colour selection.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

Headline and copy

White

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Dark

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Light

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Headline and copy - with image

White

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Dark

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Light

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Call to action

White

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Dark

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Light

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Call to action - with image

White

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Dark

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Light

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Featured list

White

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Dark

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance

Brand Light

Helping you deliver great government services

Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance