University at Buffalo (UB)
Transforming UB’s digital communications.
Callout Component
Highlight important text (e.g. a warning or tip).
On this page:
Accessibility
- Link text should be meaningful.
- Use 'Open in New Window' sparingly.
Last reviewed: November 11, 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
None.
Configure - Main Settings
Click the wrench icon to 'configure' these settings.
The component opened for editing.
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).
Hyperlinks
Select a word or phrase and click the 'Chain' tool to build a clickable hyperlink.
Add the corresponding URL or use the magnifying glass to browse for a target page within the UBCMS.
Alt Text - This optional setting provides additional labeling for hyperlinks to clarify where the link will take the reader. This text supplies the 'Title' in the embedded HTML <a> tag, which is not a heading, but is instead read by screen readers and is also displayed as a mouse hover tool tip by some browsers. This is especially useful when the URL also serves as the link text, which can get flagged as an accessibility error. See Accessibility Concerns for more details.
Most 'link to' and hyperlink settings in UBCMS components have an optional companion setting that specifies where the linked page will load. Sometimes this is a 'Target' dropdown and for other components it is a simple 'Open in new window' checkbox.
'Target' supports several settings:
- Same Tab - The link will load in the current browser tab or within the current frame/iframe if one exists. This is the default setting.
- New Tab - The link will load in a new browser tab.
- Parent Frame – The link will load within the parent iframe if one exists, otherwise it will load in the current browser tab.
- Top Frame – The link will ignore all frames/iframes and load in the current browser tab.
'Open in new window' means to open in a new tab of the current browser.
When 'open in new tab' or 'window' is selected, an additional icon will follow the linked text on your published page, to alert visitors they are about to be taken to a new browser tab, and possibly leave the current website.
Note: For accessibility reasons, be careful about sending your visitor to a new tab. This behavior may be unexpected and disortienting. (> Learn more about link accessibility.)
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.
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').
Accessibility Concerns
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Additional Reference:
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions:
- Use the 'open in new window' setting if loading a new page in the current window would disrupt their current activity (e.g. moving them to a new page while they are in the middle of completing a form).
- Use the 'open in new window' setting if loading a new page in the current window will break them out of a secure environment.
Additional Reference:
See an Example
This is an example of a Callout with a question mark icon and a bronze bar.