Alert box documentation.

Files

app/styles/modules/_alerts.scss

Alerts

Alert let's you display an inline notification. An alert has 3 stati: default, success and warning;

Example:code
notifications
Info: just so you know...
check
Success! Everything is fine, keep on rocking
flag
Warning! Something is going on, you should take a look at this
Code:
<div class="alert">
  <div class="alert-icon"><i class="icon icon-m">notifications</i></div>
  <div class="alert-content">Info: just so you know...</div>
  <div class="alert-action"><a class="btn btn-flat">Do an action</a></div>
</div>

<div class="alert alert-success">
  <div class="alert-icon"><i class="icon icon-m">check</i></div>
  <div class="alert-content">Success! Everything is fine, keep on rocking</div>
  <div class="alert-action"><a class="btn btn-flat"><i class="icon icon-m">close</i></a></div>
</div>

<div class="alert alert-warning">
  <div class="alert-icon"><i class="icon icon-m">flag</i></div>
  <div class="alert-content">Warning! Something is going on, you should take a look at this</div>
  <div class="alert-action"><a class="btn btn-flat"><span class="text-color-red">Let's fix it, pls</span></a></div>
</div>