Skip to main content

Web Content Management (WCM)

Creating a callout box

Career Fair Update

The Summer Career Fair is on 27th April 2017.

Callout boxes are graphical design elements used to call attention to a small but important chunk of information.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.

Step 1: To begin, click the "Edit HTML Source" button.


Step 2: 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.Click "Ok" when done.


A callout box is defined by a <div> with a class of "calloutbox", as below.

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

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.

Step 4:  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. Click "Save & Preview" when done.