Highlight important text (e.g. a warning or tip).
This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.
Last reviewed: September 21, 2021
Intended to be a short block of text, not all tools are provided in the Rich Text Editor.
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.
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.
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.
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.
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.
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').
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').
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: