Callouts
Callouts live in cards to bring attention to messaging.
Callouts are used to differentiate cards that have important messaging.
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.
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 3yr ago