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.