A page 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 4:1.
Do's
- always use a short, distinct and indicative heading
- select an appropriate image, that is of high quality, suggestive, complementary and relevant for the related content
- keep in mind the font-to-background contrast AA ratio, this improves a page's readability (e.g. dark backgrounds - white text / light backgrounds - black text)
- if using an image banner, make sure the highlight or main object within the image is visible
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 1 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 it on Harmonised (group 2) site