Callout blocks

Simple notes

Default

This is a default block

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

Info

This is an info block

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

Warning

This is a warning block

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

Success

This is a success block

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

Danger

This is a danger block

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

Callout block by default

This is a callout

I'm a gray callout!

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

This is a callout

I'm a gray callout!

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

Transparent callout

This is a transparent callout

I'm a 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:

This is a callout

I'm a transparent callout!

<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

This is a success callout

I'm a 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>

This is a success callout

I'm a success callout!

<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

This is an info callout

I'm a neutral 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>

This is an info callout

I'm a neutral info callout!

<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

This is a warning callout

And now I'm going to tell you something very important! Pay attention to me!

<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>

This is a warning callout

I'm a warning callout with dashed border!

<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

This is a caution callout

And here's some critical information you have to know!

<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>

This is a caution callout

I'm a caution callout with dashed border!

<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

This is a callout

I'm a 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>

This is a callout

I'm a callout in primary color with dashed border!

<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:

  Subscribe icon

This is a callout with the icon

<div class="callout">
  <h4 class="callout__title"><em class="fas fa-paper-plane">&nbsp;</em> Subscribe icon</h4>
  <p>This is callout with the icon</p>
</div>

  Lock icon

This is a callout with the icon

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

  Phone icon

This is a callout with the icon

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

  Clock icon

This is a callout with the icon

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

  File icon

This is a callout with the icon

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

  Smile icon

This is a callout with the icon

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

  Magic icon

This is a callout with the icon

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

Combine colors and icons!

  Smile icon

This is a callout with the icon

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

  Magic icon

This is a callout with the icon

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