Skip to main content
Login
Sign up
View in Markdown

ArticleCard

The built-in articleCard tag — blog-style article cards with a byline, avatar (or initials fallback), date, badge, cover image, tags, and five layout variants. Usage, options, and live examples.

A built-in tag for blog-style article cards — the card the {% taxonomy %} article listing renders one-per-post, available standalone for hand-built index pages. You give it a flat attribute set — title, teaser description, a byline with an avatar, a date, an optional badge, tags, and an optional cover image — and pick one of five layouts: a horizontal media card, a footer-metadata card, a full-bleed background-image card, a vertical card, and a plain grid card. Wrap a set of them in {% cardGrid %} for a responsive grid, or call it from Python via component('aardvark', 'articleCard', …). (The variants match the mantine.dev article-cards gallery if you want a visual reference.)

Cards degrade gracefully: omit authorAvatar and the byline shows the author’s initials in a colored disc; omit the author entirely and the byline row is dropped; omit image and image-led variants render as clean text cards rather than leaving a hole.

Demonstrations

Horizontal

variant="horizontal" (the default) is the gallery’s classic article card: cover image on top, the badge floating over its corner in a gradient chip, title, a four-line teaser, and a footer with the byline on the left and the date on the right:

Product

Introducing Ask AI, the reader assistant

A native Ask AI panel that answers reader questions from your own docs, with cited sources and metered, dollar-based billing.

The aardvark team


variant="footer" leads with an outline badge and the byline block, and moves the teaser into a separated border-top footer strip — good for uniform grids. Note the initials fallback: no authorAvatar here, so the byline draws a disc from the author’s initials:

Engineering

Why aardvark rebuilds every page (for now)

aardvark engineering

Where the dev loop's speed actually comes from, and why per-page skipping is a harder promise than it looks.


Background

variant="background" is the tall photo card: the badge renders as an uppercase category caption over a large white title, with an optional cta button pinned at the bottom — the hero treatment. With no image, it falls back to a plain text card:


Vertical

variant="vertical" is the side-by-side row — image on the left (stacking on small screens), an uppercase category caption, the title, and a compact author • date line. Here two of them ride a {% cardGrid %}:

Deep dive

Anatomy of a Mantine island

aardvark engineering

Release

vark 0.9 release roundup

The aardvark team


Plain

variant="plain" is the grid tile: a rounded 16:9 cover (when given), a small uppercase date, and the title, with the border materializing on hover. It is deliberately minimal — no teaser text, even if a description is supplied:

Designing the honest AI meter


Attributes

Set what you need, omit the rest.

Attribute Valid values Description
title string The article headline. Also the accessible link name when href is set.
href URL Make the whole card a link to the article.
url URL Alias for href, used when href is absent (handy when reusing a data source that names the field url).
description string The teaser text — the four-line body of horizontal, the footer strip of footer. vertical and plain are deliberately compact and omit it; background omits it on the photo card but shows it in the no-image text fallback. The tag body does the same job — use whichever reads better; with both given, the attribute wins and the body is ignored.
image image URL Cover image — on top (horizontal/footer), on the left (vertical), a rounded 16:9 tile (plain), or the full background (background). Omitted, the card renders as a text card.
imageAlt string Alt text for the image (use imageAlt="" for a decorative image).
badge string A badge label — a gradient chip over the cover (horizontal), an outline chip (footer), or an uppercase category caption (background/vertical).
badgeColor any theme/CSS color Badge color (chip-style variants; horizontal switches from the gradient to a filled chip).
authorName string The byline. Omitted, the byline row is dropped.
authorAvatar image URL The byline avatar. Omitted, the byline falls back to the author’s initials in a colored disc.
date YYYY-MM-DD, optionally with a time The article date shown on the card.
dateDisplay string A pre-formatted date string to show instead of the default formatting of date.
variant horizontal, footer, background, vertical, plain Card layout.
cta string Call-to-action label — rendered by the background variant only (as a button-styled affordance inside the card’s single link).
tags comma-separated string Accepted for payload parity with cards supplied through a taxonomy article listing (whose islands filter on the data) — a standalone card neither renders nor filters by them.
onclick JS expression A JS click handler on the card root (a raw HTML attribute; in Python it rides attr={'onclick': …}).
attr={…} mapping Forward raw HTML attributes — id, data-*, ARIA, analytics hooks, event handlers — onto the rendered card root. See Injecting Attributes below.

CSS Selectors

Each card is a [data-aardvark-articlecard] root carrying its layout in data-variant; inner parts use the .aardvark-articlecard-* prefix:

[data-aardvark-articlecard]              /* one article card */
[data-aardvark-articlecard][data-variant="footer"]  /* one layout variant */
.aardvark-articlecard-title              /* the (linked) title */
.aardvark-articlecard-authorrow          /* byline: avatar + name + date */

Injecting Attributes

attr={…} forwards raw HTML attributes — id, data-*, ARIA, analytics hooks — onto the rendered card root:

vark 0.9 release roundup


Was this page helpful?

Edit this pageReport an issueAsk a question