Also known as: Content well, callout

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


Default card

This is an example of a card. By default, it will appear in the main content area as a white box with a slightly darker border. 

Gray card

This is an example of a gray card. Its background is gray and its borders dark gray to help separate it from surrounding content.

Image card

This is an example of a card with an image. Images are placed to the right of the body content by default, and automatically adjust regardless of the image aspect ratio used.

Students collaborate in a lab

Borderless card with label

This is an example of a borderless card with a label. Borderless cards remove the border around the card and reduce the body padding. Labels are to highlight the importance or context of a card. 

Code reference

When to use

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

You can use a card 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 card will show up in the main body column and have a light gray border.

To create a right column sidebar callout, add the word "sidebar" to the component name field. If a card is used in the sidebar, two additional css classes will be added to it, turning the card into the accented variation and stacking the optional image on top of its body content.

How to use

  • Access and navigate to the page you would like to update.
  • Select the "Plugin - Card" 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 to the body.
  • Use the formatting tools in the WYSIWYG to style content as needed.
  • Use the "Image" field to add an image adjacent to the body text.


  • Anything you can use in a general content WYSIWYG can be displayed in a card.
  • Card 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 card, consider using the optional "Image" field.
  • The accented variation can be used in the main body by using a theme:{accent} injector. If you’re unfamiliar with how to use 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.
  • You can have the optional image show up to the left of the body by using a reversed:{true} injector.
  • You can have the optional image show up on top of the body by using a stacked:{true} injector.


The card 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.