140 lines
5.6 KiB
Markdown
140 lines
5.6 KiB
Markdown
---
|
|
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.
|
|
|
|
<p>
|
|
<a class="" data-open-video="0:33"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
|
|
</p>
|
|
|
|
<div class="docs-codepen-container">
|
|
<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/WjyGVB?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
|
</div>
|
|
|
|
```html_example
|
|
<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>
|
|
```
|
|
|
|
---
|
|
|
|
## 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.
|
|
|
|
<p>
|
|
<a class="" data-open-video="2:02"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
|
|
</p>
|
|
|
|
<div class="docs-codepen-container">
|
|
<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/JNZbGy?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
|
</div>
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
<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>
|
|
|
|
<div class="callout primary">
|
|
<h5>This is a primary 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 success">
|
|
<h5>This is a success 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 warning">
|
|
<h5>This is a warning 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 alert">
|
|
<h5>This is an alert 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>
|
|
|
|
---
|
|
|
|
## 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="docs-codepen-container">
|
|
<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/ybEVVe?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
|
</div>
|
|
|
|
```html_example
|
|
<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>
|
|
```
|
|
|
|
---
|
|
|
|
## Making Closable
|
|
|
|
Pair the callout with the [close button](close-button.html) component and `data-closable` attribute to create a dismissable alert box.
|
|
|
|
<a class="" data-open-video="4:47"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
|
|
<div class="callout primary">
|
|
<p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
|
|
<p>When using the <code>data-closable</code> attribute, you can optionally add <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>
|
|
</div>
|
|
|
|
<div class="docs-codepen-container">
|
|
<a class="codepen-logo-link" href="http://codepen.io/ZURBFoundation/pen/eWKBBd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
|
|
</div>
|
|
|
|
```html_example
|
|
<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>
|
|
```
|