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
font: font-awesome
2
font-size: 16px
3
font-weight: light
4
font-color: white or slate-dark
5
​
6
padding-left: 16px
7
padding-right: 8px
8
​
9
font-awesome codes:
10
[check-circle] - used for confirmations or positive actions
11
[exclamation-cirlce] - used for errors or negative actions
12
[calendar-times] - used when there is an issue with availability/bookings
13
[sync] - used when the app is reloading
Copied!
2. Text (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: white or slate-dark
4
padding-left: 8px
5
padding-right: 16px
6
padding-top: 12px
7
padding-bottom: 12px
Copied!
3. Container
1
max-width: 100%
2
​
3
Confirmations: green-medium
4
Warnings: yellow-medium-dark
5
Errors: red-medium
6
Neutral: off-white
Copied!
Temporary Banner Animation
Temporary banners will slide under the header and slide back up.
Last modified 2yr ago