Callouts

Callouts are flexible, text-only components used to highlight specific and important content on a page.

Best practices

  • Don’t use callouts to communicate feedback related to user actions, system statuses, or alerts. Instead use alerts.
  • Callouts should be contextual and directly related to page content.
  • Use colour to help communicate the intent of the callout. See status colours.
  • Callouts should always contain body copy and may contain a title.

How it works

All outdoor pools are open for the season

Check this page after 9:00 am each day for current outdoor pool information.

Optional title for a danger callout

Callout content example with a button to learn more.

Optional title for a warning callout

Callout content with a link example.

Callout example for an info callout without a title.

<div class="callout callout-success">
  <h4>All outdoor pools are open for the season</h4>
  <p>Check this page after 9:00 am each day for current outdoor pool information.</p>
</div>

<div class="callout callout-danger">
  <h4>Optional title for a danger callout</h4>
  <p>Callout content example with a button to learn more.</p>
  <button type="button" class="btn btn-secondary">Secondary button</button>
</div>

<div class="callout callout-warning">
  <h4>Optional title for a warning callout</h4>
  <p>Callout content with <a href="#"> a link example</a>.</p>
</div>

<div class="callout callout-info">
  <p>Callout example for an info callout without a title.</p>
</div>