<!-- This demo uses flex grid but you can use float grid too -->

<div class="row">
  <div class="columns">
    <h2>Callout</h2>
    <p>Callouts combine panels and alerts from Foundation 5 into one generic container which can be a perfect fit for both components use case. Easily add an emphasis to a section or create the notification alerts.</p>
  </div>
</div>

<div class="row">
  <div class="columns">
    <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="#0">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="#0">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="#0">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="#0">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="#0">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="#0">It's dangerous to go alone, take this.</a>
    </div>
  </div>
</div>

/* Demo Styles */

body {
  padding: 2rem 1rem;
}

$(document).foundation();