biofriction-wp-theme/node_modules/foundation-sites/docs/pages/callout.md

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">&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>
```