The Card pattern is a rich, 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.
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 publication date. Author name supports a distinct, clickable nested link. 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.
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.
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: 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 url and alt for the 16:9 image. *Required for the 6-column variant. |
author_and_date |
No | Object |
None |
Dictionary containing author, link (author's profile), and 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 %}