Banners

Hero banner

A hero banner displays the main message of the page, along with additional information and a clear action, if needed. They are a good way to inform users of the main goal of a certain page, such as registering to an event or applying for funding. They have an aspect-ratio of 3:1.

Do's

  • always use a short, distinct and indicative heading
  • select an appropriate image, that is high quality, suggestive, complementary and relevant for the related content
  • keep in mind the font-to-background contrast ratio, this improves a page's readability (e.g. dark backgrounds - white text / light backgrounds - black text)
  • make sure the highlight or main object within the image is visible (text alignment & variants, see examples in playground

Don'ts

  • do not use the content-width variant next to a full-width element (such as the header & footer)
  • do not choose an image that could be visually intrusive or overwhelming in terms of elements
  • do not display more than one call to action per page
  • do not use more than one banner per section (either underneath the site header, inside the content area or just above the footer)
  • do not opt for centre font-alignment, unless your content already has the centre-aligned property

When to use it

  • when you need to promote or convey an important message to the user
  • use on homepage or landing pages

When not to use it

  • do not use on content pages