Guidelines

The hero banner will often be the first thing a person reads or engages with on the page.

Use a descriptive page title to tell people what the page is about and what they can find there. You can also include some introduction text, call to action buttons, links and an image.

Required elements

Page heading

It should be:

• descriptive of what will be on the page
• black or white depending on the background colour

Introduction paragraph

This should support the page heading as a brief summary of what people can expect to find on the page.

It should:

• help the user decide if they are in the right place for what they need to do or find out
• be the same colour as the page heading (either black or white)

Background colour

Add a background colour that reflects the tone of the product or service.

You can use any colour from the colour palette but make sure that you check the colour contrast.

Optional elements

Image

The image must relate to the content.

It must have an alt tag that describes the image content. For more information, go to the accessibility standard for alternative text.

If you are creating a hero banner in our content management system Contentful, you should upload a 1200px (width) x 676px (height) image. Contentful will then generate and add the required image sizes.

If you are creating a hero banner using the code, consider image quality across both retina and non-retina devices.

Button

You can add a button to the hero banner to signpost a person to the main action. This should be an action such as making a purchase, using a tool or enquiring about a service.

There are 3 button colours to choose from:

• primary green
• secondary blue
• white

Choose a button colour that stands out against the background colour you have chosen.

Link

You can also add a link. For example, you could provide a link to more detailed information.

The link should be the same colour as the page heading and introductory paragraph (either black or white).

End date

Use an end date to display the date a promotion finishes.

Using a hero banner on a page

Spacing is added under the hero banner by default. If the hero banner has related content (such as products or recipes) this content can be moved up to overlap the background colour.