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><html>
<head></head>
<body>
<table class="row">
<tbody>
<tr>
<th class="small-6 large-6 columns first">
<table>
<tbody>
<tr>
<th>
<p>Not in a callout :(</p>
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last">
<table>
<tbody>
<tr>
<th>
<table class="callout">
<tbody>
<tr>
<th class="callout-inner secondary">
<p>I'm in a callout!</p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
<table class="callout">
<tbody>
<tr>
<th class="callout-inner primary">
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>
<p>This whole row is in a callout!</p>
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</body>
</html>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><html>
<head></head>
<body>
<table class="callout">
<tbody>
<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>
</tbody>
</table>
<table class="callout">
<tbody>
<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>
</tbody>
</table>
<table class="callout">
<tbody>
<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>
</tbody>
</table>
<table class="callout">
<tbody>
<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>
</tbody>
</table>
<table class="callout">
<tbody>
<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>
</tbody>
</table>
</body>
</html>DEMO
Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
| Name | Type | Default Value | Description |
|---|---|---|---|
$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-primary |
Border | 1px solid darken($primary-color, 20%) |
Border around a callout with the |
$callout-border-secondary |
Border | 1px solid darken($secondary-color, 20%) |
Border around a callout with the |
$callout-border-success |
Border | 1px solid darken($success-color, 20%) |
Border around a callout with the |
$callout-border-warning |
Border | 1px solid darken($warning-color, 20%) |
Border around a callout with the |
$callout-border-alert |
Border | 1px solid darken($alert-color, 20%) |
Border around a callout with the |
