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 |
|---|---|---|
.alert--border | .alert | Add a light solid border |
.alert--shadow | .alert | Add a light shadow (box-shadow) |
.alert--no-padding | .alert | Remove the default padding from the head/body |
.alert--info | .alert | Add blue informational treatment to card, derived from color mappings in _colors.scss |
.alert--success | .alert | Add green positive treatment to card, derived from color mappings in _colors.scss |
.alert--warning | .alert | Add orange warning treatment to card, derived from color mappings in _colors.scss |
.alert--error | .alert | Add red alert treatment to card, derived from color mappings in _colors.scss |
<div class="alert-wrapper--bottom-right">
<div class="alert alert--primary alert--shadow">
<div class="alert__close"></div>
<div class="alert__body">This is the body section of your alert.</div>
</div>
</div>