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

title	description	video	sass	tags
Callout	Callouts combine panels and alerts from Foundation 5 into one generic container component.	yQdu0oSuaCo	scss/components/_callout.scss	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

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

Watch this part in video

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

---

Making Closable

Pair the callout with the close button 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.

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