--- title: Callout description: Callouts combine panels and alerts from Foundation 5 into one generic container component. video: yQdu0oSuaCo sass: scss/components/_callout.scss tags: - panel - alert --- ## 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
```html_example
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
```html
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 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
```html_example
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](close-button.html) 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
```html_example
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.

```