Callouts

[   User Guide Navigation]

Formatting Text & Media Callouts

A callout is a short passage of text placed in a colored box to give it emphasis or importance. Callouts are often used to present cautions or warnings, key points, tips, or other important information. The tip boxes in this guide were created using callouts.

 Tips for Tool/Feature

  • Use clear and concise language that emphasizes the notice or instructions contained within the callout to reduce the height of the element on the page.
  • Choose colors that accent your page's theme while also drawing moderate attention to your message.

Instructions

Add a callout

  1. Place your cursor in the editor where you want the callout to go.
  2. Open the Add New Elements ( ) tab in the sidebar.
  3. Select the Callout  tool. The Edit Current Element  ( ) tab opens with Callout  selected as the active tool.
    Callout Tool
  4. In the  Content  panel, choose the desired heading level for the callout title. To remove the heading, choose .
    Callout Tool: Content Panel

  5. Open the Style panel and use the options to control the appearance of the callout. Your selections will be reflected in the Preview panel.
    Callout Tool: Style Panel

    1. Accent Color: Click to choose the desired border/box/background color.
    2. Callout Style: select from Default (a bold, left-side border), Title Bar (border and the title heading will have a background color), Solid (callout background is a solid color), Icons (add an alert-style icon on the left side border).
    3. Width: Sets the width percentage of the Callout container relative to the size of its parent container.
    4. Position: Provides four options for the callout position:
      1. (aligned left)
      2. (positions the callout in the center of the selected content area)
      3. (float left; places the entire callout container in a left-hand position to allow content to wrap around on the right side)
      4. (float right; places the entire callout container in a right-hand position to allow content to wrap around on the left side)
    5. Border Radius: sets the degree to which corners are rounded.
  6. In the Canvas rich text editor, enter the heading and callout text.

Edit a callout

  1. Select the Edit Current Element  ( ) tab in the sidebar.
  2. Select or place your cursor within the callout you want to modify.
  3. Choose Callout as the active tool:
    Callout Tool
  4. Use the options available in the Content and Style panels to make the desired changes.

Learn More

Cidi Labs DesignPLUS User Guide: Callouts