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 reloading2. 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: 12px3. Container
max-width: 100%
Confirmations: green-medium
Warnings: yellow-medium-dark
Errors: red-medium
Neutral: off-whiteTemporary Banner Animation
Temporary banners will slide under the header and slide back up.
Last updated
Was this helpful?