This is a headline

This is a paragraph

.elevation-00
Small border, no shadow

This is a headline

This is a paragraph

.elevation-01
small shadow

This is a headline

This is a paragraph

.elevation-02
medium shadow

This is a headline

This is a paragraph

.elevation-03
large shadow

This is a headline

This is a paragraph

.lg-pad.elevation-01
Increase the amount of padding, for use with larger cards

This is a headline

This is a paragraph

.sm-pad
decrease the amount of padding, for use with smaller cards.

This is a headline

This is a paragraph

.radius-md
p.$spacing-lg border-radius

This is a headline

This is a paragraph

.radius-lg
36px border-radius

This is a headline

This is a paragraph

.is-inverse
dark background with light text

This is a headline

This is a paragraph

.is-shaded
card has slightly darker background with normal text

This is a headline

This is a paragraph

.is-callout-bg
slightly darker background, intended to be used with no elevation classes.

This is a headline

This is a paragraph

.is-shaded.highlight
border radius is removed and blue border is added to the left side

This is a headline

This is a paragraph

.zoom-on-hover
card is eleveated slightly on hover. To be used with .expand-on-hover to denote full-card links.

This is a headline

This is a paragraph