Alerts
Provide contextual feedback messages for typical user actions with alert messages.
Alert Variants
Alerts are available for any length of text, as well as an optional dismiss button:
A simple primary alertcheck it out!
A simple success alertcheck it out!
A simple info alertcheck it out!
A simple warning alertcheck it out!
A simple danger alertcheck it out!
HTML
<div class="focus-alert focus-alert-primary">A simple primary alert!</div>
<div class="focus-alert focus-alert-success">A simple success alert!</div>
<div class="focus-alert focus-alert-info">A simple info alert!</div>
<div class="focus-alert focus-alert-warning">A simple warning alert!</div>
<div class="focus-alert focus-alert-danger">A simple danger alert!</div>Dismissible Alerts JS
Add a dismiss button and the .focus-alert-dismissible class:
Warning! You should check this out.
HTML
<div class="focus-alert focus-alert-warning focus-alert-dismissible" data-focus-alert>
<strong>Warning!</strong> You should check this out.
<button type="button" class="focus-alert-close" data-focus-alert-close>×</button>
</div>