Callout

Also known as: Sidebar, content well

The callout component is used to highlight key elements on a page that you want to visually distinguish from the rest of your content. 

Examples

Callout

This is an example of a callout. By default, the callout will appear in the main content area as a gray box. 

Code reference

When to use

Use the callout component when you want to highlight specific information within a page and to differentiate it from content that surrounds it.

You can use a callout to:

  • Direct attention to important pieces of information (e.g., contact information, application deadlines).
  • Provide a call to action.
  • Add a visual break.

By default, content in a callout will show up in the main body column and have a light gray background. 

To create a right column sidebar callout, add the term "sidebar" to the component name. If a callout is used in the sidebar, an additional css class will be added to the code turning the callout into the blue accent variation.  

How to use

  • Access t4.vcu.edu and navigate to the page you would like to update.
  • Select the "Plugin - Callout" content type in T4.
  • Enter content into the "name" field. To add the callout to the right column sidebar, include the term "sidebar" in the name. Otherwise, the callout will appear in the main body of the page by default.
  • Use the WYSIWYG (what you see is what you get) editing box to enter text or add media.
  • Use the formatting tools in the WYSIWYG to style content as needed.

Tips

  • Anything you can use in a general content WYSIWYG can be displayed in a callout.
  • Callout content should be brief and easy for the user to scan. Avoid creating a page where the sidebar content exceeds the length of the general content. 
  • If you want to add a picture to a callout, consider using the hero plugin instead.
  • The blue accent variation can be used in the main body by using a name injector class:{cwf-callout--accent}. If you’re unfamiliar with how to use name injectors, come to a T4 consulting session!
  • If you have a callout that needs to go in the sidebar of every page, add the callout into the "Site-Sidebar" section of your site.

Requirements

The callout component must have a name, and it must include some content inside the WYSIWYG.

Accessibility considerations

It’s important to keep web accessibility standards in mind while creating callout content. This includes creating accessible links with contextual titles and using appropriate heading structures to ensure maximum readability for screen readers.