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.
Anatomy
- mandatory
- optional
- Showcase
Default
| Elements | Mandatory | Description |
|---|---|---|
| image | no | representative image for the page content |
| heading | yes | heading of the item |
| description | no | a summary of the content that the component addresses |
| call to action link | no | link to either internal or external source (the call to action label can be changed to indicate the intended action or goal) |
Conditional
| Elements | Mandatory | Description |
|---|---|---|
| background color | yes | background of the banner, if no image has been selected Note: 3 available choices - blue, grey, white |
| text box / gradient overlay / shaded overlay | yes | element that allows for better font-to-background contrast ratio Note: If the gradient or shaded overlay option has been selected, the text will then be displayed directly on top of the image and not within the text box |
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 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 (text alignment & variants, see 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 1 call to action per page
- do not use more than 1 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 home or landing pages
When not to use it
- do not use it on Harmonised (group 2) sites - use Hero banner instead