Foundation
Jump to Nav

# 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.

    <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="alert callout" 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="success callout" 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.

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-padding` | Number | `1rem` | Default inner padding for callouts.
`$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.

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.