Callout boxes are graphical design elements used to call attention to a small but important chunk of information.
Hi! I'm a callout box
Important information goes here - it's easy to spot and distinct from the rest of the page
Creating a callout box
To create a callout box, editors must edit the HTML source of their page. Because of the way the WCM works, they will only need to edit the HTML that is managed by the WYSIWYG editor.
To begin, click the "Edit HTML Source" button.
This will bring up the HTML Editor.
Place your cursor at the location that you want the callout box to appear. This is typically immediately after the introductory paragraph of a page, but could be immediately after the <h1> or further down the page.
A callout box is defined by a <div> with a class of "calloutbox", as below.
There are three things to note about this code:
- The div has a class of calloutbox, and it contains both a title and the paragraph or list that makes up the content of the calloutbox.
- There is an <h2> that functions as the "title" of the callout box. It will appear as larger white-on-green text, as seen in the example.
- The content of the calloutbox is properly marked up using paragraphs and lists.
Once the code is in place, click "Update" and return to the WYSIWYG editor. If the code is correct, you will be able to edit the contents of the callout box (and its title) using the WYSIWYG editor from now on.