Callout

Usage

Use callouts to:

• draw a user's attention
• add emphasis to the content
• provide a user with more information.

A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.

When and how to use

• Highlight important information vital to the user.
• Place a callout in a prominent position on the page.
• Use with text only.

When and how not to use

• Only feature one callout per page.
• Use no more than 2 paragraphs per callout.
• Don't put the callout at the bottom of the page.

Variants

To allow for different levels of emphasis, a callout has 2 styles:

• accent
• neutral.

Accent

Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.

Neutral

Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.

Theming

The accent variant uses the site accent colour to:

• add visual prominence to the content
• aid hierarchy in the content area.

To create your own theme, see theming guidance for designers or theming guidance for developers.

Rationale

To enhance visual weight and aim to conform with WCAG2.0 Criterion 1.4.1, Ripple callouts use:

• a thick left-hand border
• background colours
• padding.

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)