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 there'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 callout with the icon

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


  Lock icon

This is callout with the icon

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


  Phone icon

This is callout with the icon

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


  Clock icon

This is callout with the icon

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


  File icon

This is callout with the icon

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


  Smile icon

This is callout with the icon

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


  Magic icon

This is callout with the icon

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

  Smile icon

This is callout with the icon

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


  Magic icon

This is callout with the icon

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


Was this answer helpful? Yes No

Sorry we couldn't be helpful. Help us improve this article with your feedback.