Style Guide
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.
Last modified 2yr ago
Copy link
On this page
Usage of Banners
Anatomy of Banners (banner)
Temporary Banner Animation