Callout blocks

Jeffrey Davis
Modified on: Wed, 11 Sep, 2019 at 1:51 PM

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


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>
J
Jeffrey is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.
Theme options
This widget is for demo purposes only