Floating banner โ
A Floating Banner presents users with relevant, short information and one or two CTAs related to the message. A banners is persistent on the screen, therefore users can either ignore it or interact with it - by dismissing it or by selecting a CTA. Banners can be displayed either at the top or at the bottom of the screen.
Usage guidelines โ
When to use โ
- To convey relevant information for the user (e.g. displaying a cookie consent banner or promoting a new feature in your product)
- To redirect the user to an external resource (e.g a link to download an app).
When not to use โ
- To give users information on the state of the system; use Toast instead.
- To give feedback after an action has taken place or to give instructions on how to move forward or resolve issues; use Alert instead.
Writing guidelines โ
Title
The title should indicate the purpose of the banner in a concise manner.
Description
Keep the message concise and describe the benefits of performing an action.
CTAs
Should present users with relevant action that they can perform in relation to the message of the banner.
Capitalization and case
Write titles and descriptions in sentence case.
Specifications โ
Anatomy โ
Banner - Left
- Container
- Dismiss icon (optional)
- Illustration (optional)
- Title (optional)
- Description (optional)
- Primary CTA (optional)
- Secondary CTA (optional)
Banner - Center
- Container
- Dismiss icon (optional)
- Title (optional)
- Description
- Primary CTA (optional)
- Secondary CTA (optional)
Floating Banner Cookies
- Container<
- Dismiss icon (optional)<
- Title (optional)<
- Description<
- Primary CTA (optional)<
- Secondary CTA (optional)<
- Cookie name<
- Cookie description<
- Cookie description accordion<
- Accept cookie switch<
Types โ
There are three types of Banners: Left, Center and and Cookies.
Size โ
Banner is available in two main sizes: Default and Mobile.
Default can be used for larger devices (desktop and tablet landscape), while Mobile is to be used on smaller devices (mobile and tablet portrait).
Variants โ
Left Banner, in Default size, comes in two variants: Illustration large and Illustration small.
Styling โ
Banner is available for both dark and light theme.
Left
- All the elements are optional to display (title, description, illustration, CTAs, dismiss icon).
- The supporting illustration can be either a pictogram, the Zurich logo (isotype), an icon or an image.
Center
Title, CTAs and dismiss icon are optional to show. Description is needed for this type of banner.
Shadow and transparency
To give the effect of elevation from the underlying content, Banner comes with a shadow effect and a subtle background transparency.
The shadow should point down when the banner is placed at the top of the page, and should point up when the banner is placed at the bottom. By default, Left Banner is styled to be placed at the top (shadow pointing down), while Center Banner is styled to be placed at the bottom of a page (shadow pointing up).
Behavior โ
Positioning and alignment โ
Banners stretch to fit the width of the screen.
According to the case, you can position a banner either at the top or bottom of the page - remember to update the shadow effect: it should be oriented towards the bottom for the top banner, and towards the top for the bottom banner.
Left - Content overlap
Left Banner is commonly placed at the top of the screen. It usually overlaps the content underneath and remains on screen while content scrolls, until dismissed by the user.
Left - Content overlap
Left Banner can be positioned to push the content down, including the header, instead of overlapping content. In this case, keep the banner and header visually distinct from each other by overlapping the banner's shadow on the header, or by changing the theme of the banner.
**Center - Content overlap**
Center Banner is usually placed at the bottom of the screen. It overlaps the page content and remains on screen while content scrolls, until dismissed by the user.
Interaction โ
Interaction in Banners happens through:
Dismiss icon
Banners remain on screen until the user dismiss them, but their persistence in the page does not impide them to perform other actions.If your case requires, the dismiss icon can be hidden.
Dismiss icon
A primary and secondary action can be optionally added to the message to prompt user to take action once they're being informed of something.
Accessibility โ
Design considerations โ
- Make sure there is enough contrast between the text and the background color.
- To avoid overwhelming users, focus on a single theme or piece of information per banner, and don't present them with more than one at once.
Keyboard interaction โ
- Tab: to move focus between items.
- Space / Enter: to activate an item.