Compass Web Framework

See Compass in action: View the Example Site

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

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. 

When to use

The card component is ideal for highlighting important information on a page and distinguishing it from surrounding content. Use a card to:

  • Highlight key information: Draw attention to essential details like contact info or application deadlines.
  • Provide a call to action: Encourage users to take specific actions.
  • Create visual breaks: Separate content sections for better readability

Default display: By default, cards appear in the main body column with a light gray border.

Sidebar display: To create a right column sidebar callout, add "sidebar" to the component name. This will apply additional styles, making the card visually distinct and stacking any optional image on top of the content.

How to use

  • Access T4: Go to t4.vcu.edu and open the page you want to update.
  • Select: Choose the "Plugin - Card" content type.
  • Name: Enter a name for the card. To place the card in the right column sidebar, include "sidebar" in the name.
  • Add content: Use the WYSIWYG editor to input text or media. Style the content as needed with the available formatting tools.
  • Add an image: Use the optional "Image" field to include an image next to the body text.

Tips

  • Content: Anything you can use in a general content WYSIWYG can be displayed in a card.
    • Content length: 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. 
  • Accented variation: 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.
  • Sidebar callouts: 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.
  • Images: Use the optional "Image" field to add visuals. Consider image placement options:
    • Left of body: Use a reversed:{true} injector.
    • On Top of body: Use a stacked:{true} injector.

Requirements

  • Name: The card component must have a name.
  • Content: The card must include some content inside the WYSIWYG.

Accessibility considerations

Ensure that the card content meets web accessibility standards.