Hero banner
A hero banner should appear at the top of page to deliver an important message or call to action. However it shouldn't be used to replace the a title on content pages
What it is
A hero banner is a full-width introduction at the top of a page — a heading, intro and a call to action, optionally with a supporting image, a decorative line band, or a list of key links.
How to add it
A hero lives in a page's hero slot, so you don't add it from the block menu — you switch the page to a layout that has one. Open the Layout selector and choose a hero layout (Hero on its own, or Hero with a sidebar); the hero band appears at the top of the page, ready to edit.
Type straight into the heading and intro text. The call-to-action button is optional: use the Show button tickbox to turn it on or off, then set its label and link.
Getting a hero onto a page
Switching supporting content
The last hero in the Example tab has an image and links pre-filled; switching the Supporting content option reveals each.
Configure it
Supporting content
The Supporting content option chooses what sits beside the message: Nothing, a supporting Image, the decorative Line band, or a list of Links. They share the one space, so exactly one shows at a time — switching between them swaps what appears on the right.
Colour and layout
Pick a brand Colour (the tint follows the four NSW brand options). Full width stretches the background edge to edge; Extra-wide layout re-splits the space to give the message more room (content 67% / side 23%).
Tips
Consult the NSW Design System Hero banner guidance for when a hero is appropriate — typically the primary message on a landing page.
Use a hero at the very top of a landing page, not partway down; keep the heading short and lead with one clear call to action.
Related pages
For a prominent message that is not the page introduction, use an In-page alert or a Callout.
Example
Primary message
A heading, intro and a call-to-action button. Full-width.
Supporting image
Adds a supporting image beside the message. Contained width.
Supporting line system
The decorative line band in place of an image. Full-width.
Supporting content
Swaps the button for a list of key links. Contained width.
Beyond the design system
Extra-wide layout
Our extra: nsw-hero-banner--extra-wide re-splits the space (content 67% / side 23%) — about the column ratio, not full-width.
Brand light colour
The colour field re-tints the hero; it follows the same four brand tints the DS ships (here: Brand light).