Callout Component

Highlight important text (e.g. a warning or tip).

On this page:

  • Link text should be meaningful.
  • Use 'Open in New Window' sparingly.

> Read more about making this component accessible.

Last reviewed: May 17, 2022

Using This Component

This component has only one tab.

It can be placed in the main body of your page, in the right sidebar or on a homepage. It may vary slightly in appearance depending on the browser in which it is viewed.

Technical Restrictions


Configure - Main Settings

Click the wrench icon to 'configure' these settings.

Callout Tab

Headline: Enter a title for the callout box (optional).

Text: Enter your message here, including any formatting or links using the built-in Rich Text Editor that supports basic formatting (bold, italics and bullets) as well as hyperlinks. 

  • Pre-formatted text can be pasted in from other sources (e.g. a word processor) and this allows inclusion of additional text formatting such as sub- and super-script, but any incompatibly formatted text will be suppressed (e.g. titles or images).
  • For hyperlinks, the option is provided to open in new page. When that is selected, an additional icon will follow the linked text, to alert visitors that they will be taken to a new browser window, or even leave the current website. If the hyperlink goes to a downloadable file, an document icon will instead be shown as well as the file size if the file is on the same server. (Read more about link labels.)

Intended to be a short block of text, not all tools are provided in the Rich Text Editor.

Color scheme: Eleven choices are provided, including three full colors (blue, orange, red) and eight gray boxes with a colored left border. The default is a gray with a blue border.

  • These colors can be set to match your brand 'color pop', chosen to provide consistent 'personality' throughout your site.

Icon: Seven choices are provided, including the default of no icon.

These colors can be set to match your brand 'color pop', chosen to provide consistent personality and differentiation throughout your site.

Accessibility Concerns

See an Example

This is an example of a Callout with a question mark icon and a bronze bar.

Watch a Training Video

Was This Information Helpful?

(so we can thank you or request more details)
( addresses only please)