Highlight important text on your page, such as time-sensitive deadlines, or procedural tips.
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.
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').
March 6, 2018