vic_logo

Hero banner - Design system

Provide a short summary of a page or section.

Usage

The hero banner is used to introduce your page. It summarises your page, including a title, short blurb, and links to other key journey-related content.

It can also be styled a number of different ways to add variety and interest to the page.

Example

Standard hero banner

A visual example of the hero banner.

Hero banner with call to action

Allows you to add a call to action button for a key piece of information.

A visual example of the hero banner with a CTA.

Hero banner with background image

Option to place a background image at the top of the page. This means all text apart from the title is moved underneath the banner.

A visual example the hero banner with a background image.

Options

The hero banner has a number of styling options.

It can be customised with unique 'corner graphics' particular to the page, or these graphics can be removed entirely.

A call-to-action can be added, if the page has one primary action you would like users to take (this negates the usage of journey links).

The banner can also feature a background image which spans the entire width and height of the banner (this also negates the usage of journey links).

How to build

The hero banner is mandatory on all pages.

For more information, view the Victorian Government digital guide.

Reviewed 13 May 2019

Get support using SDP

Our community of practice for anyone with content on SDP meets once a month. We cover research, analytics, new features and more. You can also learn from how others are using the platform and get support to build new pages. To join or find out more contact nicole.shilo@dpc.vic.gov.au

Was this page helpful?