The Card pattern is a rich, responsive, highly structured card variant designed to display heavily contextual items like articles, webinars, announcements, or whitepapers. It supports custom column spans and fluidly adjusts its layout between vertical and horizontal orientations depending on the space available.
Responsive by design, the larger horizontal variants are built to adapt to screen real estate: 6-column cards collapse down to 4 columns and eventually 2 columns on smaller screens, while 4-column cards collapse down to 2 columns.
The Card pattern is composed of the following elements:
| Element | Description |
|---|---|
| Heading (required) | Main title text (h4). Truncated at 3 lines. |
| Link (required) | Makes the entire card's surface area clickable. |
| Image | 16:9 aspect ratio thumbnail. Required for 6-column layout. |
| Author & Date | Displays author name and/or publication date. Hidden if no image is provided. |
| Footer | Contains metadata such as a resource type (with icon) and a content type chip. |
The 2-column layout is the default standard. It results in a vertical card with the image at the top and content stacked below.
Omitting the image results in a more compact, text-forward vertical card. Note that omitting the image also hides the author and date metadata to preserve layout balance.
The 4-column layout results in a horizontal card with the image on the left and the content area filling the remaining space on the right. Note: 4-column cards collapse down to 2-column vertical layouts on smaller screen dimensions.
Removing the image from the 4-column variant creates a clean, wide-format text block, perfect for lists of text-heavy resources.
The 6-column layout is an expansive horizontal format suited for highly featured content. Because of its width, an image is strictly required for this variant to maintain visual structure. Note: 6-column cards collapse down to 4-column, and eventually 2-column layouts based on screen dimensions.
The vf_card Jinja macro can be used to generate a card pattern. The entire card surface operates as a clickable link, while CSS layer-stacking allows nested elements (like the author's name) to retain their own distinct click targets.
Important Note: The cards must be enclosed within a container that has the 'grid-row' class. Additionally, when defining the
footer.resource_type.icon, the string must be a valid Vanilla Framework icon name. The macro automatically prepends the prefix, rendering your string asp-icon--{name}.
| Name | Required? | Type | Default | Description |
|---|---|---|---|---|
columns |
No | string |
"2" |
Grid column span for the card. Options are 2, 4, or 6. |
link |
Yes | string |
None |
Link to the referenced item. Stretches to make the entire card clickable. |
heading |
Yes | string |
None |
The main title text (rendered as h4). Truncated at 3 lines. |
image |
No* | Object |
None |
Dictionary containing src and alt for the 16:9 image. *Required for the 6-column variant. |
author |
No | string |
None |
Optional string for the author's name. Hidden if no image is provided. |
date |
No | string |
None |
Optional string for the publication date. Hidden if no image is provided. |
footer |
No | Object |
None |
Dictionary containing resource_type (with icon and text) and content_type (read-only chip). |
To import the Card Jinja macro, copy the following import statement into your Jinja template.
{% from "_macros/vf_card.jinja" import vf_card %}