Callout Component

Highlight important text on your page, such as time-sensitive deadlines, or procedural tips.

Using This Component

Add the component to the page. There is only one tab.

The component when first loaded onto the page.

The component when first loaded onto the page.

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

This component 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.

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.) 

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.

The component opened for editing, showing new options.

The component opened for editing, showing new options.

Example of the new options in use.

Example of the new options in use.

Suggestions for Use

We encourage you to adopt a consistent usage style for how these components are used throughout your site.

More examples are provided on the Demo Site, but for inspiration, here is how we use Callouts in our UBCMS documentation.  

Global Change

The blue box with a globe icon signifies "UB global", or information about site- or system-wide details related to the page they are reading.


The green border with an 'i' icon draws attention to specific information about your programs or services. The color has a positive tone, encouraging action ('green light').


The teal border with a checkmark icon is a reminder or annotates a useful tip to encourage best practice.

Caution (some cause for alarm)

The yellow border with a triangular exclamation mark cautions about risky behavior that may result in negative but not catastrophic consequences. The color has a mildly alarming tone, encouraging caution ('yellow light').

Critical Concern (strong cause for alarm)

The red box with a triangular exclamation mark signals extremely risky behavior that will have severe or catastrophic repercussions. The color has a strong alarming tone, encouraging extreme caution (BIG 'red light').



Was This Page Helpful?

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

On this page:

See an Example:

Last Reviewed:

March 6, 2018