Foundation Callouts – Promote Different Areas of Content

foundation callout
Post updated July 6th, 2016

Foundation Callout – What exactly is it

Foundation Callouts in WP-Forge are container components that give emphasis to specific areas of content in a page or a post:

Foundation Callout combine panels and alerts from Foundation 5 into one generic container component.
Foundation

Foundation Callout Examples

Adding a Foundation Callout to your post/page is super easy. When you have decided which kind of callout you want to use, simply click the “text” tab in the editor.

To add a regular Foundation Callout to a post or page use the following:

<div class="callout">
  <h5>This is a callout.</h5>
  <p>As you can see it's pretty plain looking/p>
</div>

This will give you a callout that looks like this:

This is a callout.

As you can see it’s pretty plain looking

Foundation has given you the ability to really make your callouts stand out by adding one of the following classes to it: .primary .secondary .success .warning or .alert

<div class="panel callout">
   <p>panel content goes here</p>
</div>

In the example above all I added was the .secondary class. This will give you something that will stand out just a little bit more to your visitors:

This is a secondary callout.
It’s a little ostentatious, but useful for important content.

Here are examples of what the other Foundation Callouts look like:

This is a primary callout.
It’s a little ostentatious, but useful for important content.
<div class="primary callout">
This is a primary callout.
It's a little ostentatious, but useful for important content.
</div>
This is a success callout.
It’s a little ostentatious, but useful for important content.
<div class="success callout">
This is a success callout.
It's a little ostentatious, but useful for important content.
</div>
This is a warning callout.
It’s a little ostentatious, but useful for important content.
<div class="warning callout">
This is a warning callout.
It's a little ostentatious, but useful for important content.
</div>
This is a alert callout.
It’s a little ostentatious, but useful for important content.
<div class="alert callout">
This is a alert callout.
It's a little ostentatious, but useful for important content.
</div>

One other thing I like about Foundation Callout is you can also add the .radius or .round class to any callout you are using to give the corners a semi-rounded or rounded appearance like so:

This is a callout panel with semi-rounded corners.
<div class="primary callout radius">
   <p>This is a callout with semi-rounded corners.</p>
</div>
This is a callout panel with round corners.
<div class="alert callout round">
   <p>This is a callout with round corners.</p>
</div>

Another awesome thing that you can do with Foundation callouts is you can give the ability for your end users to “close” the callout on their own. In the example below I added a close button to the callout, the “x” in the upper right hand corner. You can click it and the callout will close:

This is Important!

When you’re done reading it, click the close button in the corner to dismiss this alert.

<div class="primary callout" data-closable>
  <h5>This is Important!</h5>
  <p>When you're done reading it, click the close button in the corner to dismiss this alert.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">×</span>
  </button>
</div>

Foundation Callout – Very Easy to Use

As you can see adding a Foundation Callout to your content is very easy and could be very useful if implemented the right way.

Read more: Foundation Docs: Callouts

Leave a Comment