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.

3429
Days
08
Hours
46
Minutes

Guidance

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

Top of page