University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Callout Component

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

New Brand Features

This component is completely reimagined and has great flexibility in how it can be used. Completely new color/icon choices available.
> read more about the digital brand transition 
> read more about changes to this component

The component when first loaded onto the page.

The component when first loaded onto the page.

Using This Component

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

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 formating or links using the built-in Rich Text Editor that supports basic formating (bold, italics and bullets) as well as hyperlinks. 

  • Pre-formated text can be pasted in from other sources (e.g. a word processor) and this allows inclusion of additional text formating such as sub- and super-script, but any incompatibly formated 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: Six colors are provided, ranging from light to dark. The default is a light gray.

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

The component settings.

The component settings.

New Brand Features

At a Glance
Completely new color/icon choices available.
Existing callout choices will be mapped to similar settings in new version but sites should check color/icon choices using Brand Preview.
Headline and Text settings are the same in both versions and values will carry through between versions.

Overview

This component is completely reimagined and has great flexibility in how it can be used. Completely new color/icon choices available. Existing callout choices will be mapped to similar settings in new version but sites should check color/icon choices using Brand Preview. Headline and Text settings are the same in both versions and values will carry through between versions. 

Tip: Tie your color choices into your overall brand strategy.

How to Make Updates

  • Until your site enters the new brand, access the new options using the Brand Preview tool.
  • Old color/icon settings are not accessible while in Brand Preview mode, but will be mapped to new settings (see below).
  • Headline and Text settings are the same in both versions and values will carry through between modes.
  • Color/icon changes in the new brand mode will 'stick' regardless of choices made in the non-brand mode.

While no changes are required, we suggest you develop a rubric for the new color/icon combinations to use throughout your site.  

For this component, you can adjust your pages while in Brand Preview mode, without impacting your original color/icon choices. Text changes will show in both modes.

New Settings

Headline: (no change, same values used in both modes)

Text: (no change, same values used in both modes)

Color Scheme: (new choices available, old choices mapped over)

  • 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. There is no all-gray box.
  • Old settings are automatically mapped to new ones, see below.

Icon: (new choices available, old choices mapped over)

  • Seven choices are provided, including the default of no icon. 
  • Old settings are automatically mapped to new ones, see below.

Mapping of Old Settings to New Version

For the icons

image showing the mapping of old to new icons

These two icons are mapped:  

  • "!" in a speech bubble -> "!" in a triangle
  • pencil -> "i" in a circle

Unchanged (though slightly different icon in most cases):

  • no icon, checkmark in a square, "i" in a circle, "?" in a circle, "!" in a triangle, globe

For the colors

image showing the mapping of old to new colors

All old dark colors map to one of the three solid colors:  

  • dark gray -> solid ub-blue
  • dark blue -> solid ub-blue
  • dark green -> solid ub-blue
  • dark orange -> solid solar-strand
  • dark teal -> solid ub-blue
  • dark red -> solid capen-brick
image showing the mapping of old to new colors

All old light colors map to one of the gray boxes with a colored left bar:  

  • light gray -> gray + victor-e-blue
  • light blue -> gray + victor-e-blue
  • light green -> gray + lake-lasalle
  • light orange -> gray + greiner-green
  • light teal -> gray+ lake-lasalle
  • light red -> gray + letchworth-autumn
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.

Information

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

Tip

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

Restrictions

None.

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See an Example:

Last Reviewed:

April 20, 2017