Card

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. 

Examples

Code reference

• Default
• Accent background
• Gray background
• Image
• Reversed image
• Stacked

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 t4.vcu.edu 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.

Tips

• 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.

Requirements

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.