Foundation
Jump to Nav

Callout

Formerly panels, callouts can be used to create sidebar panels or call out important content in an email.


Basics

A Callout adds a border, background, and some padding. Callouts use a full table structure, with the class .callout on the outer <table> (for bottom margin) and the .callout-inner applied to the innermost <th>.

When using Inky HTML, the <callout> tag will create this structure for you. You can wrap them around a row or inside a column.

HTML
<row>
  <columns small="6">
    <p>Not in a callout :(</p>
  </columns>
  <columns small="6">
    <callout class="secondary">
      <p>I'm in a callout!</p>
    </callout>
  </columns>
</row>

<callout class="primary">
  <row>
    <columns small="12">
      <p>This whole row is in a callout!</p>
    </columns>
  </row>
</callout>
<table class="row">
  <tbody>
    <tr>
      <th class="small-6 large-6 columns first">
        <table>
          <tr>
            <th>
              <p>Not in a callout :(</p>
            </th>
          </tr>
        </table>
      </th>
      <th class="small-6 large-6 columns last">
        <table>
          <tr>
            <th>
              <table class="callout">
                <tr>
                  <th class="callout-inner secondary">
                    <p>I&apos;m in a callout!</p>
                  </th>
                  <th class="expander"></th>
                </tr>
              </table>
            </th>
          </tr>
        </table>
      </th>
    </tr>
  </tbody>
</table>

<table class="callout">
  <tr>
    <th class="callout-inner primary">
      <table class="row">
        <tbody>
          <tr>
            <th class="small-12 large-12 columns first last">
              <table>
                <tr>
                  <th>
                    <p>This whole row is in a callout!</p>
                  </th>
                  <th class="expander"></th>
                </tr>
              </table>
            </th>
          </tr>
        </tbody>
      </table>
    </th>
    <th class="expander"></th>
  </tr>
</table>

DEMO


Coloring Classes

The color of a callout can be changed by adding the class .primary, .success, .warning, or .alert to the element. A callout without a color class will have a white background.

HTML
<callout>
  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>
<callout class="primary">
  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>

<callout class="success">
  <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>

<callout class="warning">
  <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>

<callout class="alert">
  <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</callout>
<table class="callout">
  <tr>
    <th class="callout-inner">
      <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>
<table class="callout">
  <tr>
    <th class="callout-inner primary">
      <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

<table class="callout">
  <tr>
    <th class="callout-inner success">
      <p>Successfully avoided Kraken. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

<table class="callout">
  <tr>
    <th class="callout-inner warning">
      <p>There may be Krakens around. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

<table class="callout">
  <tr>
    <th class="callout-inner alert">
      <p>Incoming Kraken! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    </th>
    <th class="expander"></th>
  </tr>
</table>

DEMO


Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$callout-background Color $white

Background color of a callout.

$callout-background-fade Number 85%

Fade value for callout backgrounds.

$callout-padding Length 10px

Padding inside a callout.

$callout-margin-bottom Length $global-margin

Bottom margin of a callout.

$callout-border Border 1px solid darken($callout-background, 20%)

Border around a callout.

$callout-border-secondary Border 1px solid darken($secondary-color, 20%)

Border around a callout with the .success class.

$callout-border-success Border 1px solid darken($success-color, 20%)

Border around a callout with the .success class.

$callout-border-warning Border 1px solid darken($warning-color, 20%)

Border around a callout with the .warning class.

$callout-border-alert Border 1px solid darken($alert-color, 20%)

Border around a callout with the .alert class.