Callout Component

This component is used to draw attention to an important piece of information that might otherwise be missed on your page. It might be a tip, a warning about a deadline, or a special link that your visitors need to see.

2. Open the Sites Console and navigate to your site; e.g. Sites + Self-Paced Training + {your site}.

3. Choose any page on your site or create a new page.

4. Select that page and click Open in the Commands Menu that now appears.

5. To add a component...

• Click the Toggle Side Panel button in the upper left of the window.
• Switch to the Component Browser.
• Components are listed alphabetically. Or type part of its title and click Enter.
• Find your desired component and drag it onto the page.

6. Select the component, then click the wrench icon to Configure it.

• Add a Headline (title). This is optional and will be bolded.
• Add some text. Formatting is possible but we suggest keeping it simple.
• Choose a Color Scheme instead of the default gray.
• Choose an Icon.
• Click the checkmark icon when you are done. (The 'X' cancels your changes.)

7. Observe the results.

8. Now try changing the settings.

Because this is a text component, it supports additional formatting which we can add using this toolbar across the top, called a Rich Text Editor. Some basic word processing features are supported, such as bold, italics, underlining, bullets, and hyperlinks. There is also a very simple spell checker.

Best practice: we suggest if you use this component frequently on your site that you develop a consistent style, so users readily understand the nature of your Callouts. For example, in our own documentation, we use green and the “i” icon for general information, teal and the check mark for tips, orange and an exclamation for a cautionary note, while red is reserved for a critical warning of something that will break the page.

• Callout Component