Callout

A component for 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 Create a Callout

  • 1

    Add Callout

  • 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 advertises Usability Testing with a short description, link, and photo of a person using a mobile device.
    Example of a Callout component with a light background color advertises Usability Testing with a short description, link styled as a button, and a 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 styled as a button, and a photo of a person using a mobile device.

This page was last modified on 09/22/2026

Related Links