Callout Boxes-Templates and CMS - Carnegie Mellon University

Callout Boxes

The third column of a 3 column page contains a callout box area (see examples on the right). Multiple callout boxes can be added to a page. Follow these steps to create a new page with a callout box area:

  1. Start by selecting the parent folder (i.e., the folder where the new page should reside in) in the folder structure on the left. From the menu bar at the top select New > your-website > 3 column.

    Callout Box
  2. On the next page, fill out the title and main content as you normally would when creating a new page. Then, below the main content area look for the section pertaining to callout boxes:

    Callout Box
    Enter the appropriate information:

    • Callout Box Options - Select either small or large text for the content, and the placement of the label (top or bottom of the callout box.)
    • Callout box label (optional) - Enter a label (this will appear at the top or bottom of the callout box depending on your previous selection.)
    • Background Color - Choose a background color for the callout box from the drop-down menu. View samples of the background colors available.
    • Content - Enter your content (e.g., helpful links, announcements, etc.)
      Tip: You may add your own callout box heading in the content area instead of using the callout box label.  You may also add images to callout boxes (180 pixels wide maximum for a callout box with a background color, or 219 pixels wide maximum for a callout box with no background color).
    • To add another callout box, select the +.

      Add Callout Box
  3. Click Submit to save the page.

To learn more, please read about Callout Boxes in the Visual Look and Feel section.

Video Tutorial

Would you like to add a callout box to an existing 2 column page? Please see Change Between 2 & 3 Columns.

callout box example 1

You may use callout boxes for a variety of content types including:

  • links
  • images
  • announcements
  • quotes
  • reminders
  • and more!

callout box example 2

Callout boxes are created on a page-by-page basis so they are not ideal for information that needs to be displayed site-wide.

Callout boxes come in several different background colors.

callout box example 3

If you prefer to have white space for your callout box area (such as in this example), simply select "none" for the background color.  This is ideal if you would like to embed a Twitter widget, or use an image that needs to be displayed on a white background:

Plaidly Serving You

Image Dimensions

In a callout box with a background color: 180 pixels wide max

In a callout box without a background color: 219 pixels wide max