Simple notes

<div class="note note--default">
  <h4 class="note-title">Default</h4>
  <p>This is a default block</p>
</div>

<div class="note note--info">
  <h4 class="note-title">Info</h4>
  <p>This is an info block</p>
</div>

<div class="note note--warning">
  <h4 class="note-title">Warning</h4>
  <p>This is a warning block</p>
</div>

<div class="note note--success">
  <h4 class="note-title">Success</h4>
  <p>This is a success block</p>
</div>

<div class="note note--danger">
  <h4 class="note-title">Danger</h4>
  <p>This is a danger block</p>
</div>

Callout block by default

<div class="callout">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a gray callout!</p>
</div>

<div class="callout callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a gray callout!</p>
</div>

Transparent callout

<div class="callout callout--transparent">
  <h4 class="callout__title">This is a transparent callout</h4>
  <p>I'm a transparent callout!</p>
</div>

 With dashed border:

<div class="callout callout--transparent callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a transparent callout!</p>
</div>

Success callout

<div class="callout callout--success">
  <h4 class="callout__title">This is a success callout</h4>
  <p>I'm a success callout!</p>
</div>

<div class="callout callout--success callout--dashed">
  <h4 class="callout__title">This is a success callout</h4>
  <p>I'm a success callout!</p>
</div>

Info callout

<div class="callout callout--info">
  <h4 class="callout__title">This is an info callout</h4>
  <p>I'm a neutral info callout!</p>
</div>

<div class="callout callout--info callout--dashed">
  <h4 class="callout__title">This is an info callout</h4>
  <p>I'm a neutral info callout!</p>
</div>

Warning-callout

<div class="callout callout--warning">
  <h4 class="callout__title">This is a warning callout</h4>
  <p>And now I'm going to tell you something very important! Pay attention to me!</p>
</div>

<div class="callout callout--warning callout--dashed">
  <h4 class="callout__title">This is a warning callout</h4>
  <p>I'm a warning callout with dashed border!</p>
</div>

Caution callout

<div class="callout callout--danger">
  <h4 class="callout__title">This is a caution callout</h4>
  <p>And here there's some critical information you have to know!</p>
</div>

<div class="callout callout--danger callout--dashed">
  <h4 class="callout__title">This is a caution callout</h4>
  <p>I'm a caution callout with dashed border!</p>
</div>

Callout in primary color

<div class="callout callout--primary">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a callout in primary color</p>
</div>

<div class="callout callout--primary callout--dashed">
  <h4 class="callout__title">This is a callout</h4>
  <p>I'm a callout in primary color with dashed border!</p>
</div>

Callout blocks with the Font Awesome icons

It is possible to combine your callouts with Font Awesome icons:

<div class="callout">
  <h4 class="callout__title"><em class="fa fa-send-o"> </em> Subscribe icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fa fa-lock"> </em> Lock icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fa fa-phone"> </em> Phone icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fa fa-clock-o"> </em> Clock icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fa fa-file"> </em> File icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fa fa-smile-o"> </em> Smile icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout">
  <h4 class="callout__title"><em class="fa fa-magic"> </em> Magic icon</h4>
  <p>This is callout with the icon</p>
</div>

Combine colors and icons!

<div class="callout callout--success">
  <h4 class="callout__title"><em class="fa fa-smile-o"> </em> Smile icon</h4>
  <p>This is callout with the icon</p>
</div>

<div class="callout callout--warning">
  <h4 class="callout__title"><em class="fa fa-magic"> </em> Magic icon</h4>
  <p>This is callout with the icon</p>
</div>