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
<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.
<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.
<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.
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.
<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">×</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">×</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.
| Name | Type | Default Value | Description |
|---|---|---|---|
$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 |
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 |
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.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$color |
Color | $callout-background |
Color to use. |
callout
@include callout($color);Adds styles for a callout.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$color |
Color | $callout-background |
Color to use. |