Intro

A banner shows a short and concise message that displays at the top of the screen. It allows the user to take action or ignore it at any time. Apps could choose to use it for communicating internet connectivity, errors, synchronization statuses, and in-app notifications.

Usage

  • Banners must remain on screen until dismissed by the user.
  • Only one banner may be shown at a time.
  • The maximum number of actions on the banner is two.
  • Actions can only be styled as a text button.
  • On mobile, the three-line text is the maximum.
  • On tablet, the two-line text is the maximum.
  • Usage of icon or image is optional.

Structure

A. Icon or image (optional)

B. Text (one to three lines for mobile, one to two lines for tablet)

C. Buttons (text button only, the maximum is two actions)

Types

One-line text with one action or two actions

 

A. One-line text with one action

B. Icon or image and one-line text with two actions

C. One-line text with two actions

Two-line text/three-line text with two actions

 

A. Two-line text with two actions

B. Icon or image and two-line text with two actions

C. Three-line text with two actions (only for mobile)

Behavior

Banners typically appear when a screen loads content and it will remain on screen until dismissed by the user.

Appearing

Scrolling (without taking action)

Dismissing Banners

Specs

One-Line Text with One Action



Two-Line Text with Two Actions



Two-Line Text with Two Actions (with icon/image)



Sample Element Alpha Hex
Container #FFFFFF
Text #32363A
Text button #0A6ED1