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.
font-awesome
font-size: 16px
font-weight: light
font-color: [any color]-dark
padding-left: 16px
padding-right: 8px
font-awesome codes:
[piggy-bank] - used for bonused jobs
[car] - used for errors or negative actions
2. Text a. Title (a-text-h4)
font-weight: bold
font-size: 16px
font-color: [any color]-dark
b. Content (a-text-paragraph)
font-weight: book
font-size: 16px
font-color: [any color]-dark
Text Spacing
padding-left: 8px
padding-right: 12px
padding-top: 12px
padding-bottom: 12px
3. Container
max-width: 100% (343px)
font-color: [any color]-light
Last modified 2yr ago
Copy link
On this page
Usage of Callouts
Anatomy of Callouts