The card component should be used to highlight key elements on the page that you want to visually distinguish from the rest of your content. While any WYSIWYG content can be added inside this component, it is recommended to keep the content in this element concise to ensure the integrity and original intent of the component.


By default, a card will be styled with a white background and a darkened border. If an image is used, it will appear next to the body content on viewports larger than a standard mobile device. These defaults can be overridden with the following modifier classes.




By adding a data-label="$" attribute to a card, where $ is the label message, a prominent label will be added to the top-left of the card to better highlight important content. Labels should be short/succinct, as lengthy labels will most likely break card styles in certain instances.

T4 implementation

Cards are implemented in T4 as the "Card" plugin, meaning its classes are .plugin- prefixed instead of .cwf- prefixed.

When using the card content type in the sidebar/sub-nav area of a T4 website, the stacked layout and accent theme will automatically be applied, rendering the card with its image (if provided) above its body content and with an accent background color (blue by default).


In the "Name" field of the "Card" plugin, the following case-insensitive keywords can be used to change the area in which the card appears:

This plugin can also be used within the global "Site-Feature", "Site-Sidebar", and "Site-Footer" sections to have it displayed globally within the feature, sidebar, and footer areas respectively.


In the "Name" field of the "Card" plugin, the following injectors can be used:


Default card

Cards provide a way to visually distinguish key elements of the page from the rest of the content. By default, a card will have a white background with a gray border surrounding it. Any WYSIWYG content can be added to its body, including buttons and images.

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.

A randomized, square image from Picsum

Reversed card

This is an example of a reversed card with an image. Instead of showing the image to the right of the body, it shows it to the left.

A randomized, 16:9 image from Picsum

Stacked card

This is an example of a stacked card with an image. The image is now above the body content. This style should be used when in the sidebar, and is automically applied when in a grid.

A randomized, 3:4 image from Picsum

Labeled card

This is an exampled of a labeled card. By adding a data-label="Featured" attribute to this card, it now has a prominent label to the top-left to better highlight its importance.

Borderless card

This is an example of a borderless card with an image. This style removes the border , reduces the internal padding of the card, and only works on non-themed (or default) cards.

A randomized, 3:4 image from Picsum