Hero banner

The Hero banner is used to introduce a page by creating a focal point for the page title and summary.

See and interact with the Hero banner component block demo on this page.

Demo component

Example #1

Heading, summary, image, two column left, brand dark.

 

Heading <H1>

Summary text. Limit of 170 characters. Summary text. Limit of 170 characters.

Native plants with ocean and island in the distance. Photo: Stuart Poignard

Example #2

Heading, summary, Call to action, no image, two column left, brand dark.

Heading <H1>

Summary text. Limit 170 characters. Summary text. Limit 170 characters.

Example #3

Heading, summary, logo, image, two column left, brand dark.

Note – logos in hero banners are not standard and require brand exemption. Before using a logo in the banner you must discuss your requirements with the Brand Team.

Heading <H1>

Summary text. Limit 170 characters. Summary text. Limit 170 characters.

A plant within Narriearra Caryapundy Swamp National Park. Photo: Courtney Davies &copy;DPIE

Example #4

Heading, summary, call to action, feature heading, 4 feature links, image, three column centre, brand dark.

Heading <H1>

Summary text. Limit 170 characters. Summary text. Limit 170 characters. Summary text. Limit 170 characters.

wildflowers, Torrington State Conservation Area. Photo: NSW Government

Example #5

Heading, summary, countdown clock, two column left, brand dark.

Heading <H1>

Summary text. Limit 170 characters. Summary text. Limit 170 characters. Summary text. Limit 170 characters.

X
Days
X
Hours
X
Minutes

Guidance

See the Help Hub guide for detailed instructions on how and when to use this component.

Top of page