Callout

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

Basics

A callout is just an element with a .callout class applied. You can put any kind of content inside.

Watch this part in video

edit on codepen button
<div class="callout">
  <h5>This is a callout.</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>
This is a callout.

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Coloring

Callouts can be colored using the .secondary, .primary, .success, .warning, or .alert classes. Links inside the callout will be tinted to match the color of the callout.

Watch this part in video

edit on codepen button
<div class="callout secondary">
  <h5>This is a secondary callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>
This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a primary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a warning callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is an alert callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Sizing

Callouts can be sized using the .small and .large classes. These will affect the padding around content to be smaller and larger respectively.

edit on codepen button
<div class="callout small">
  <h5>This is a small callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

<div class="callout large">
  <h5>This is a large callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>
This is a small callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a large callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.

Making Closable

Pair the callout with the close button component and data-closable attribute to create a dismissable alert box.

Watch this part in video

Any element can be used as a close trigger, not just close button. Adding the attribute data-close to any element within the callout will turn it into a close trigger.

When using the data-closable attribute, you can optionally add Motion UI classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's .fadeOut() function.

edit on codepen button
<div class="callout alert" data-closable>
  <h5>This is Important!</h5>
  <p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
  <p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="callout success" data-closable="slide-out-right">
  <h5>This a friendly message.</h5>
  <p>And when you're done with me, I can be closed using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>
This is Important!

But when you're done reading it, click the close button in the corner to dismiss this alert.

I'm using the default data-closable parameters, and simply fade out.

This a friendly message.

And when you're done with me, I can be closed using a Motion UI animation.


Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$callout-background Color $white

Default background color.

$callout-background-fade Number 85%

Default fade value for callout backgrounds.

$callout-border List 1px solid rgba($black, 0.25)

Default border style for callouts.

$callout-margin Number 0 0 1rem 0

Default bottom margin for callouts.

$callout-sizes Map small: 0.5rem
default: 1rem
large: 3rem

Sizes for Callout paddings.

$callout-font-color Color $body-font-color

Default font color for callouts.

$callout-font-color-alt Color $body-background

Default font color for callouts, if the callout has a dark background.

$callout-radius Color $global-radius

Default border radius for callouts.

$callout-link-tint Number or Boolean 30%

Amount to tint links used within colored panels. Set to false to disable this feature.


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

callout-base

@include callout-base;

Adds basic styles for a callout, including padding and margin.


callout-style

@include callout-style($color);

Generate quick styles for a callout using a single color as a baseline.

ParameterTypeDefault ValueDescription
$color Color $callout-background

Color to use.


callout

@include callout($color);

Adds styles for a callout.

ParameterTypeDefault ValueDescription
$color Color $callout-background

Color to use.