Skip to header Skip to main navigation Skip to sub navigation Skip to main content Skip to sidebar Skip to footer

Compass Web Framework

    1. Home
    2. Components
  1. Content
  2. 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. 


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.

[View Image] Students collaborate in a lab [View Image]

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:

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



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.

Quick links

Accent card

This is an example of an accent card. Its background is blue, borders dark blue, and text colors white. This style is automatically applied when a card is used in the sidebar (by adding the word "Sidebar" to its name field).

View graphic versionView graphic versionView graphic version