Callouts

Callouts help you putting en emphasis on a piece of information or notify the user of something. It can take two aspects :

<div class="lui callout">
  Default - This is just a regular callout.
</div>

<div class="lui callout filled color">
  Filled - This is just a filled style callout
</div>

The content of your callout can be as complex as you desire

<div class="lui callouts">
  <div class="lui filled red callout">
    <h4 class="header">Error!</h4>
    <p>
      Something went terribly wrong
    </p>
    <div class="footer actions">
      <button class="lui button flat">Dismiss</button>
    </div>
  </div>
</div>

Callouts can be groupped into a parent with the classes lui callouts

<div class="lui callouts">
  <span class="lui filled red callout">Error<button class="lui button flat">Dismiss</button></span>
  <span class="lui filled green callout">Success<button class="lui button flat">Dismiss</button></span>
  <span class="lui filled orange callout">Achtung!<button class="lui button flat">Dismiss</button></span>
  <span class="lui filled callout">Fair enough...<button class="lui button flat">Dismiss</button></span>
</div>