Banners

Banners guideline is updated on 19 Sep 2018

Overview

Alerts are banners that communicate a message with a severity attached to it and provides actions for users to address or dismiss. They grab the user’s attention to provide critical information needed in context. The design elements usually allow users to interact with or ignore these alerts at any given time.
 

Attributes on an alert

1. Icon (optional)

An icon supports the communicated message if icons are included, use simple-shaped ones.  

2. Message

A short description of the communicated message. May include information that helps ease the messaging. Keep descriptions in a single line, if possible.  

3. Actions (optional)

A link to a call to action or next steps. Any links to documentation should open in a new browser tab.  
Single Line Alert
 
Multi-Line Alert
 
Alert Content Placement
 

Types of Alert

 

Screaming

Desktop Informational Alert
Mobile Informational Alert
Desktop Warning Alert
Mobile Warning Alert
Desktop Progress Alert
Mobile Progress Alert

Waving

Desktop Informational Alert
Mobile Informational Alert
Desktop Warning Alert
Mobile Warning Alert
Desktop Progress Alert
Mobile Progress Alert