Last reviewed: 14 April 2021

Components

Hero banner

Use the hero banner to create an area at the top of a page that introduces the content.

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.

Example

Supporting communities

How Co-op is supporting local communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

A hero banner with an image, background colour and button.

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.

Example

Supporting communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

A hero banner using a page heading, introduction paragraph and background colour.

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).

Example

Supporting communities

How Co-op is supporting local communities

Find out what community and the power of local people means to Co-op. You'll discover the great things we can achieve when we work together to create a better society.

A link used to highlight further information about the main topic of this page.

End date

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

Example

Spicy dinner deals

P14-Indian-1200x676

Treat everyone to a flavour packed Indian meal tonight with our great offers on takeaway favourites you can easily make at home. Choose your rice, sauce and delicious naan or chutney and get ready to spice things up for a low price.

Until 20 October 2020

A hero banner for a food promotion with an end date.

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.

Example

A hero banner with related content in product cards.

A hero banner with related content in product cards.

Changelog for this page

Date Notes
14 April 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.