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.
Guidelines for using alerts and callouts on City of Winnipeg websites and applications.

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>