Card
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.
Variations
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.
Behavior
.cwf-card--stacked- Stacks a card's image above its body content..cwf-card--reversed- Reverses a card's image and body order, showing the image to the left of the body instead of the right.
Style
.cwf-card--accent- Alters the card's style to use the theme's accent color for the background (blue by default)..cwf-card--gray- Alters the card's style to have a gray background.
T4 implementation
When using the card content type in the sidebar/sub-nav area of a T4 website, the .cwf-card--stacked and cwf-card--accent modifier classes 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).
Examples
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.
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.
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.