Foundation Laravel Package

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.

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

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

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

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