Hero banner

The hero banner communicates the key message of the page. It should feature a primary goal or message, and can be accompanied by supporting content such as images or graphics.

Refer to NSW Digital Design System - Hero banner for full guidance and demo on how and when to use this.

Preview

Placement

Hero banners are placed at the top of the main body content area of a page. They include the page name as Heading 1. 

Customisation

Brand colour

A brand colour can be applied to the hero banner background and highlights bar, including:

• brand dark
• brand light
• off white
• white.

Banner layout

A hero banner can have an image or list of links to accompany your primary message.

• An image or illustration can be used to showcase brand identity, help with understanding content, or evoke emotional appeal through visual elements. 
• Links are only used when there is no image required. Do not include anchor links for the webpage. Minimum of 1 link and a maximum of 6 links.

DCJ enhancement

• Adding a secondary call-to-action button provides an alternative user journey and improves user engagement.
• On mobile screens, images will be turned off to allow more room for textual content and make it easier to scroll through information.

DCJ authoring guidelines

• Title allows a maximum of 100 characters.
• Summary allows a maximum of 150 characters.
• Link section title: no character limit, under 60 characters recommended.
• Link description: maximum 30 characters.

Page type

A hero banner can be used on: 

• campaign pages 
• homepage 
• landing pages. 

They cannot be used on: 

• content pages 
• Easy Read.