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