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>

Extensions Bundle

Get 6 most popular extensions for your help center with a total price of $1,218 for $548 only.

  • Side Navigation
  • Prev Next Buttons
  • Table of Contents
  • Community Hot Posts
  • Alerts
  • Server Status
Learn More
Did this answer your question?
Still can’t find what you’re looking for?

Hire an expert

Our consultants and developers are Zendesk Guide certified.
Free up your time for your business while we take care of your help center.

Get a Quote

Ask a question

Not sure how something works or how to make changes?
Don’t worry, we’ll answer all your questions.

Contact Us