Callout Boxes

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.

Screenshot of WYSIWYG editor with HTML button highlighted

This will bring up the HTML Editor.

Screenshot of HTML source editor with calloutbox code highlighted.

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.

<div class="calloutbox">
<h2>Calloutbox Title</h2>
<p>Calloutbox content</p>
</div>

There are three things to note about this code:

  1. 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.
  2. 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.
  3. 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.

Screenshot of editing a calloutbox in the WYSIWYG editor