Alerts

Create custom branded alerts by using the alert color mixin: @include alert-color($border-color, $background-color).

This is a base alert. It may have a link.

<div class="alert" role="alert">
    This is a base alert. <a href="#" class="alert--link">It may have a link.</a>
</div>

This is an error alert. It may have a link.

<div class="alert alert--error" role="alert">
    This is an error alert. <a href="#" class="alert--link">It may have a link.</a>
</div>

This is an warning alert. It may have a link.

<div class="alert alert--warning" role="alert">
    This is a warning alert. <a href="#" class="alert--link">It may have a link.</a>
</div>

This is a success alert. It may have a link.

<div class="alert alert--success" role="alert">
    This is a success alert. <a href="#" class="alert--link">It may have a link.</a>
</div>

This is an info alert. It may have a link.

<div class="alert alert--info" role="alert">
    This is an info alert. <a href="#" class="alert--link">It may have a link.</a>
</div>