Callout

Subtle alert variant for less urgent messages.

Markup

<div class="af-callout af-is-primary">
  <strong>
    Primary Callout:
  </strong>
  Subtle alert variant.
</div>
<div class="af-callout af-is-success">
  <strong>
    Success Callout:
  </strong>
  Success message.
</div>
<div class="af-callout af-is-info">
  <strong>
    Info Callout:
  </strong>
  Informational message.
</div>

Live example

Primary Callout: Subtle alert variant.

Success Callout: Success message.

Info Callout: Informational message.