Banners

Search…

Banners

Banners display important messages.

Usage of Banners
Banners are used to confirm an action taken or reflect a status.  Banners can be sticky or temporary banners and will share the same styling.
Anatomy of Banners (banner)
Banners use color and iconography to indicate the nature of the action or messaging.
1. Label Icon
Font Awesome (a-icon-line) is used for the label icon.
font: font-awesome
font-size: 16px
font-weight: light
font-color: white or slate-dark
​
padding-left: 16px
padding-right: 8px
​
font-awesome codes:
[check-circle] - used for confirmations or positive actions
[exclamation-cirlce] - used for errors or negative actions
[calendar-times] - used when there is an issue with availability/bookings
[sync] - used when the app is reloading
2. Text (a-text-paragraph)
font-weight: book
font-size: 16px
font-color: white or slate-dark
padding-left: 8px
padding-right: 16px
padding-top: 12px
padding-bottom: 12px
3. Container
max-width: 100%
​
Confirmations: green-medium
Warnings: yellow-medium-dark
Errors: red-medium
Neutral: off-white
Temporary Banner Animation
Temporary banners will slide under the header and slide back up. 

Avatars

Callouts

Last modified 2yr ago

Copy link

On this page

Usage of Banners

Anatomy of Banners (banner)

Temporary Banner Animation