A page banner is smaller than a hero banner. The banner is displayed below the European Commission site header. It is the first image users see when they come to the page. It can be used to promote a specific message you have in mind. It is also a specific place where you can provide a call to action button to take your users to a detail page.
Anatomy
Banners display a focused message and provide users with clear action to take. They are placed at the top of the page below the site header.
Page banner images have an aspect ratio of 4:1, meaning the width will be always four times the height of the images.
| Components | Constraint | Restrictions |
|---|---|---|
| image | optional | choice between 2 background colours when there is no image |
| title | mandatory | single sentence, between 40-50 characters including space |
| description | optional | 100-150 characters maximum, including space |
| call to action | optional | actionable, verbs, 25 characters maximum, including space |
When to use
- Exclusively for the homepage or a landing page
- To communicate important messages, such as a motto or a tagline, also possible for user to take an action
When not to use
- Do not use more than one banner in the same webpage
DO's
- The supporting illustration is:
- relevant
- high quality
- emotionally persuasive
- full width
- the minimum ratio is 4:1
DON'Ts
- Where there isn't any specific need to promote or convey an important message to users in that page