Callout

.callout makes elements look like a callout section.

Applicable Elements

Any container element

Basic Usage

Good sashimi asks for very little:
a sharp knife, a steady hand, and the patience to let the fish speak for itself.

—Mika Sazanami, The Quiet Counter

<div class="callout">
  <blockquote>
    Good sashimi asks for very little:<br />
    a sharp knife, a steady hand, and the patience to let the fish speak for itself.
  </blockquote>
  <p>—Mika Sazanami, <cite>The Quiet Counter</cite></p>
</div>

Variants

Callouts have variants based on their roles.

Today’s sashimi selection includes tuna.

Your sashimi order has been placed.

Only a few servings of sea urchin remain.

We couldn’t add bluefin tuna to your order.

<div class="callout info">
  <svg class="icon"><title>info</title><use href="info.svg#root"></use></svg>
  <p>Today's sashimi selection includes tuna.</p>
</div>
<div class="callout success">
  <svg class="icon"><title>saved</title><use href="saved_white.svg#root"></use></svg>
  <p>Your sashimi order has been placed.</p>
</div>
<div class="callout warning">
  <svg class="icon"><title>warning</title><use href="warning.svg#root"></use></svg>
  <p>Only a few servings of sea urchin remain.</p>
</div>
<div class="callout destructive">
  <svg class="icon"><title>warning</title><use href="warning.svg#root"></use></svg>
  <p>We couldn't add bluefin tuna to your order.</p>
</div>

Combination

.icon automatically adjusts its position inside .callout to align with the text.

Today’s sashimi is best enjoyed chilled.
Let it rest for a few minutes before serving.

Start with the sea bream, then move on to the richer tuna.

<div class="callout">
  <svg class="icon"><title>info</title><use href="/info.svg#root"></use></svg>
  <p>
    Today's sashimi is best enjoyed chilled.<br />
    Let it rest for a few minutes before serving.
  </p>
  <p>Start with the sea bream, then move on to the richer tuna.</p>
</div>