Cards can be used to isolate or create separation between content. You may indicate state or include media (think photos or videos) in your cards. They occupy 100% the width of their container by default. In our examples, we wrap the cards with our grid construct to constrain the width.
| Modifier Classes | Modifies | Description |
|---|---|---|
.card--border | .card | Add a light solid border |
.card--shadow | .card | Add a light shadow (box-shadow) |
.card--no-padding | .card | Remove the default padding from the head/body |
.card--info | .card | Add blue informational treatment to card, derived from color mappings in _colors.scss |
.card--success | .card | Add green positive treatment to card, derived from color mappings in _colors.scss |
.card--warning | .card | Add orange warning treatment to card, derived from color mappings in _colors.scss |
.card--error | .card | Add red alert treatment to card, derived from color mappings in _colors.scss |
<div class="card card--border">
<div class="card__head">Card Title</div>
<div class="card__body">This is the body section of your card. Like dogs, cards do better with a friend. Go ahead and group them!</div>
</div><div class="card card--border">
<div class="card__media">Media</div>
<div class="card__head">Media Card Title</div>
<div class="card__body">This is the body section of your card. Like dogs, cards do better with a friend. Go ahead and group them!</div>
</div>_colors.scss<div class="card card--success">
<div class="card__head">Success</div>
<div class="card__body">Lorem ipsum Elit laborum eu ullamco ex esse laboris sint aliquip eiusmod pariatur laborum Duis adipisicing eiusmod aute velit fugiat veniam in.</div>
</div>