The hero banner pattern displays a large heading, introductory text and call-to-action buttons over a large background image.

Rules for hero banner

• Hero banners must only be used at the top of a page directly under the navigation bar.
• Breadcrumbs must not be used on pages featuring a hero banner.
• Hero banners must only be used on the home page of a web site.
• Only the specified background colours for the heading text may be used, applying the appropriate class.
  

  Blue

  no class required (default value)

  Burgundy

  hero-section__heading--burgundy

  Green

  hero-section__heading--green

  Orange

  hero-section__heading--orange

  Purple

  hero-section__heading--purple

• A second optional call-to-action button can be included if required.
• Introduction paragraph text is required if any call-to-action buttons are used.

Image guidelines

• The hero banner uses two different sized images to provide greater design control accross different screen sizes. These sizes are -
  • 1920 pixels wide and 600 pixels high
  • 750 pixels wide and 500 pixels high.
• Both sized images must be included.
• Multiple images must not be combined (for example, to form a collage).
• Photographs including people are encouraged in the hero banner.
• Close ups of subjects, such as people's faces, are discouraged. The hero banner image should have room to breathe.

Text guidelines

• The hero banner heading must not exceed 39 characters.
• The hero banner paragraph text must not exceed 230 characters.
• There must only be one paragraph on a hero banner.
• The text must never expand beyond the height of the hero banner as this will result in the text being partial obscured.

Options available

• Hero banner with introduction and two call-to-action buttons
• Hero banner with introduction and one call-to-action button
• Hero banner with introduction
• Hero banner with heading only
• Hero banner with heading only - art direction

Hero banner with introduction and two call-to-action buttons

This example uses the default heading colour and includes all possible types of content.

Hero banner with introduction and one call-to-action button

This example uses an alternate heading background colour and has one call-to-action button.

Hero banner with introduction

This examples uses an alternate heading background colour and has no call-to-action buttons.

Hero banner with heading only

This example uses an alternate heading background colour and only includes a heading.

Hero banner with heading only - art direction

This example shows how a cropped version of the image is used for the mobile scaled size to focus on the key essence of the image. To see the different image adjust the width of your browser until the alternate image is shown.