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.

Floating Banner Overview

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

Anatomy Banner left
  1. Container
  2. Dismiss icon (optional)
  3. Illustration (optional)
  4. Title (optional)
  5. Description (optional)
  6. Primary CTA (optional)
  7. Secondary CTA (optional)

Banner - Center

Anatomy Banner Center
  1. Container
  2. Dismiss icon (optional)
  3. Title (optional)
  4. Description
  5. Primary CTA (optional)
  6. Secondary CTA (optional)

Floating Banner Cookies

Floating Banner Cookies
  1. Container<
  2. Dismiss icon (optional)<
  3. Title (optional)<
  4. Description<
  5. Primary CTA (optional)<
  6. Secondary CTA (optional)<
  7. Cookie name<
  8. Cookie description<
  9. Cookie description accordion<
  10. Accept cookie switch<

Types ​

There are three types of Banners: Left, Center and and Cookies.

Left
Center
Cookies - This variant is similar to the Center one, but with an additional accordion to individually accept cookies. For a cookies banner that doesn't have separate entries to accept, the regular Center version can be used.

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).

Default
Default
Mobile
Mobile

Variants ​

Left Banner, in Default size, comes in two variants: Illustration large and Illustration small.

Illustration large
Illustration small-You can use this variant when you need your banner to occupy less vertical space, or when you don't want to give a prominent role to the supporting illustration.

Styling ​

Banner is available for both dark and light theme.

Banner Dark and Light

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.
Left - Styling example

Center

Title, CTAs and dismiss icon are optional to show. Description is needed for this type of banner.

Styling example - Center

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).

Keep Banner visually distinct and elevated from other elements of the page.
Avoid merging Banner with the underlaying background color / content.

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 - 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 - Pushing content down

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 - 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

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.

CTAs

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.