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