Article Card

A linked article teaser: image, tag, date, title, excerpt. A composition of the Card surface, a Badge and the card title step, not a new primitive, and it restyles none of them.

import from ~/components/patterns/ArticleCard

A pattern, not a primitive

The card is assembled from parts that already exist. The surface and its hover are Card's interactive variant; the tag is a Badge; the heading is the card title step. Patterns live here, apart from the primitives, because they carry an editorial decision (which fields a teaser shows and in what order) that a single component should not.

The image is a slot, not a source. The card owns the aspect ratio and the clip; the caller owns loading, sizing and art direction by passing an <img> into it.

Anatomy

Design

One material, many forms

How a single particle treatment became the brand’s whole graphic language: the sphere, the ember river, and the primitives between them.

ArticleCard — image · tag · date · title · excerpt

One link wraps the whole card. The image is a slot; everything else is a labelled prop.

Convenience: src / alt

Brand gradient placeholder
Guide

The card renders the image for you

Give it a src and an alt. The <img> is created with object-cover so it fills the frame, lazy-loaded, and async-decoded.

<ArticleCard src="/cover.jpg" alt="…" />

Pass src and the card renders the image itself: object-cover, loading='lazy', decoding='async'. Use the image slot only when you need a <picture>, a video or a placeholder.

In a grid

Design

One material, many forms

How a single particle treatment became the brand’s whole graphic language: the sphere, the ember river, and the primitives between them.

Development

Software as craft, built to last

Why we treat a codebase like a physical object: made to outlive the framework it started on, and legible to whoever inherits it.

Investing

The long arithmetic of compounding

Patient capital, and what changes when you measure returns in decades instead of quarters.

grid

The card fills its column and stretches to a shared height, so a row stays even when excerpts differ in length.

Guidance

Do

Pass the image as an <img> with object-cover into the slot. The card sets the aspect ratio and clips; the image fills it.
Keep the tag to a single category word. It is a Badge, not a description.
Give <time> a machine-readable dateTime alongside the human date, so the date is not just decoration.
Let the excerpt clamp. Three lines is the cap; write to it rather than relying on the ellipsis.

Don't

Do not put a second link inside the card. The whole card is already one link; a nested one is unreachable and invalid.
Do not stack more than a tag and a date in the meta row. Author, read-time and the rest belong on the article, not the teaser.