Card

The built-in card tag — flashy content cards with icons, cover and background images, gradient/glass/stat variants, whole-card outbound links, and a responsive grid. Usage, options, and live examples.

A built-in tag built from Mantine’s Card (plus Image, BackgroundImage, Badge, and ThemeIcon) behind one tag pair. One card does pretty much anything a card can: a title and a Markdown body, an icon, a cover or full-bleed background image, badges, an accent color, gradient/glass/stat looks, and a whole-card outbound link. Wrap a set of them in {% cardGrid %} for a responsive grid. Use it as {% card %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'card', …) (and component('aardvark', 'cardGrid', …)).

Cards are flashy by default — hover lift, cover-image zoom, an animated sheen on link cards, accent borders — and all of it is reduced-motion-safe and looks right in light and dark.

Demonstrations

Basic card

A title and a Markdown body. Standalone, a card is a full-width block:

Icons

icon="…" takes any Tabler icon name (kebab-case, e.g. rocket, brand-github, bolt). Tabler icons are lazy-loaded — only the icons a page actually uses are fetched from a CDN at view time, so the full ~5,800-icon library is available without bloating the page. icon= also accepts a Font Awesome class (icon="fa-solid fa-rocket", icon="fab fa-github" — needs theme.fontawesome: true), an emoji, an image URL, or inline <svg>. accent="…" colors the icon chip, accent bar, hover border, and CTA.

Link cards

Add href and the whole card becomes a link (with a hover lift and an animated sheen). External URLs open in a new tab and get an external-link icon automatically; internal links just navigate. A cta adds a button at the bottom (use ctaVariant="link" for a plain text link with an arrow instead). badge/badges work on any card.

Cover images

image="…" puts a full-bleed cover image at the top (it zooms on hover for link cards). Pair it with badge for a label, and alt for accessibility (alt="" for a purely decorative image):

Theming

Guide

Colors, fonts, and layout — make it yours.

Image

New

Zoom into any figure with a click-to-open lightbox.

Background-image cards

variant="image" makes the image the full card background, with the text laid over it. A gradient scrim keeps the title and body readable on any photo (WCAG AA), in both color schemes:

Gradient and glass

variant="gradient" paints the card with a gradient (derived from the theme accent, or set explicitly with gradient="from,to,deg"):

variant="glass" is a translucent, frosted surface — its backdrop blur shows whatever sits behind it, so it’s best over a colorful background or the page’s background image (shown here over a background image so the blur is visible):

Stat cards and accent bars

variant="stat" is a centered big-number layout for KPIs (the title is the number, the subtitle is the label). accentBar="top" (or "left") adds a gradient accent edge:

The grid

{% cardGrid %} lays cards out in a responsive grid that collapses to one column on mobile. Use cols=N for a fixed wide-screen count, or colsBase/colsSm/colsMd/ colsLg for full control; spacing sets the gap.

From a loop or a data file

A {% card %} tag is expanded as the page is scanned, so it can’t be written inside a {% %} for loop. To generate cards from a data file (or any list), use the Python form — component('aardvark', 'card', …) and component('aardvark', 'cardGrid', …) — which return the same markup the tags do (there’s one implementation behind both). Keyword arguments are the same attributes you’d write on the tag; children is the body:

The component libraries page builds a small storefront exactly this way — each card wraps a live Stripe element, all driven from data/products.yaml.

With other components

A card body is full Markdown, so it holds any other component — here a {% badge %} and an {% icon %} ride inside the body, and an {% image %} sits beneath the grid:

Attributes

{% card %}

Set what you need, omit the rest.

{% cardGrid %}

This tag ships as a built-in; when you need something different, define your own custom component and call it the same way.

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="Card"] — or through the Mantine Styles API classes (.mantine-Card-root and its inner parts):

/* Every rendered Card carries this island marker */
[data-aardvark-island="Card"] { }

/* Mantine Styles API class on the root element */
.mantine-Card-root { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — onto the rendered card. card also exposes a dedicated onclick shortcut for the common click case; in Python it rides this same channel as attr={'onclick': …}.

For any other attribute — data-*, ARIA, analytics hooks — pass the attr={…} dict directly: