Callout

Highlighting Information

Summary

A Callout is a box that visually stands out from other text on your website. It may highlight a quote, image, or other information and can link to more details. A Callout can only be placed in a 1-column band layout. 

Audience

Editors, Publishers, and Web Managers.

How To

  • 1

    Add Callout

    • Add a 1-column Band to the page. Callouts are limited to the 1-column band layout.
    • Inside the column, select the Add Component button.
    • Select Callout from the Choose Component dialogue box.
  • 2

    Callout Title and Image

    • Callout Title - Appears at the top of the Callout box. Example: Usability Testing
    • Select Add Media to place an image on the left side of the Callout.

    Image Dimensions and Guidance

    Callout Example

    Example of a Callout component with a light background color advertises Usability Testing with a short description, link, and photo of a person using a mobile device.
  • 3

    Callout Text and Links

    • Callout Text - Enter the main text for the Callout. Example: "Usability Testing is a research activity..."
    • Links can be added in the Callout Text as Text or Button Links.

    Example Button Link

    Usability Testing and Other Services

  • 4

    Callout Background Color and Heading Level

    • Select the desired Callout Background Color. Your website's Color Palette determines the actual color of your Callout Background.
      • Light
      • Dark
    • Select the appropriate Heading Level. The default is H3.
    • Note: On Site Pages with the On This Page menu enabled, using H2 causes the Callout to appear in the menu. 

    Dark Background Color Example

    Example of a Callout component with a dark background color advertises Usability Testing with a short description, link, and photo of a person using a mobile device.