Alert

Alerts can be used to provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For an alert, combine the class alert with a contextual color class or a color library class.

Contextual Colors

<div class="alert success">
    <strong>Well done!</strong> You successfully read this important alert message.
</div>

<div class="alert info">
    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

<div class="alert warning">
    <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<div class="alert danger">
    <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>

Color Library

In most cases, you'll probably be using contextual colors for your alerts, but you can also use any class from the color library. Below are just a few examples.

<div class="alert asphalt">
    <strong>Hey You!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="alert crimson">
    <strong>Hey You!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="alert jungle">
    <strong>Hey You!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="alert wheat">
    <strong>Hey You!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Links in Alerts

<div class="alert success">
    <strong>Well done!</strong> You successfully read <a href="#">this important alert message</a>.
</div>

<div class="alert info">
    <strong>Heads up!</strong> This <a href="#">alert needs your attention</a>, but it's not super important.
</div>

<div class="alert warning">
    <strong>Warning!</strong> Better check yourself, you're <a href="#">not looking too good</a>.
</div>

<div class="alert danger">
    <strong>Oh snap!</strong> Change <a href="#">a few things up</a> and try submitting again.
</div>