Callout blocks

Avatar
Michael Reid

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 article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.