Government of British ColumbiaGovernment of British Columbia

DevHub

beta

Topic

Design System

British Columbia Government Design System for Digital Services

Status

Last Updated: April 11, 2019

Callout

Callouts are an excerpt of text that has been pulled out and used as a visual clue to draw the eye to the text. They are used to help direct a user's attention to important pieces of information.

Example

Loading...

Use This For

Differentiating a block of text from the content that surrounds it, for example:

  • Important snippets of information
  • Quotes
  • Examples
  • Additional information about the page

Don’t Use this For

  • Warning notifications
  • Page alerts

Design Guidance

  • Use callouts very sparingly - it’s less effective if it’s overused.

CMS Lite Users

Learn how to insert a callout component on your page

Accessibility

Colour Contrast

  • Text on the gray background meets contrast requirements
  • The thick left border conveys information using more than just colour

Code

HTML

<div class=”bcgov-callout”>
<p>By March 1, 2018, eligible residents of B.C. are expected to renew enrolment in the Medical Services Plan (MSP) and get a BC Services Card.</p>
</div>

CSS

.bcgov-callout {
padding: 25px;
border-left: 10px solid #38598a;
margin: 16px 0;
background-color: #f2f2f2;
}

.bcgov-callout h1, h2, h3, h4 {
margin: 0;
}
  • Create an Issue

Design System
Content