Alerts
Place .alert on the element to create the shape of an alert. Alert headings are optional. To add a heading, use .alert_heading on a child <h#>.
.alert_info
a simple note
A simple message
<div class="alert alert_info">
<h2 class="alert__heading">no worries</h2>
<p>A simple message</p>
</div>
.alert_caution
ah oh
Tread lightly
<div class="alert alert_caution">
<h2 class="alert__heading">no worries</h2>
<p>Tread lightly</p>
</div>
.alert_warning
warning
Zomgoodness, you're in the danger zone!
<div class="alert alert_warning">
<h2 class="alert__heading">no worries</h2>
<p>Zomgoodness...</p>
</div>
.alert_success
success
Hooray!
<div class="alert alert_success">
<h2 class="alert__heading">success</h2>
<p>Hooray!</p>
</div>
.alert_light
whatever
A simple message
<div class="alert alert_light">
<h2 class="alert__heading">whatever</h2>
<p>A simple message</p>
</div>
.alert_dark
a thing
A simple message
<div class="alert alert_dark">
<h2 class="alert__heading">a thing</h2>
<p>A simple message</p>
</div>