Banners
Banners display important messages.
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.
Banners use color and iconography to indicate the nature of the action or messaging.
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 banners will slide under the header and slide back up.
Last modified 3yr ago