Style Guide
Search…
Callouts
Callouts live in cards to bring attention to messaging.

Usage of Callouts

Callouts are used to differentiate cards that have important messaging.

Anatomy of Callouts

Callouts used color and iconography to indicate the nature of content and differentiate between callouts. The icon and container must be in the same color family.
1. Label Icon Font Awesome (a-icon-line) is used for the label icon.
1
font-awesome
2
font-size: 16px
3
font-weight: light
4
font-color: [any color]-dark
5
padding-left: 16px
6
padding-right: 8px
7
8
font-awesome codes:
9
[piggy-bank] - used for bonused jobs
10
[car] - used for errors or negative actions
Copied!
2. Text a. Title (a-text-h4)
1
font-weight: bold
2
font-size: 16px
3
font-color: [any color]-dark
Copied!
b. Content (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: [any color]-dark
Copied!
Text Spacing
1
padding-left: 8px
2
padding-right: 12px
3
padding-top: 12px
4
padding-bottom: 12px
Copied!
3. Container
1
max-width: 100% (343px)
2
font-color: [any color]-light
Copied!
Last modified 2yr ago