Components

Cards

Fourteen variants on one set of tokens. Any of these will take your palette, corner radius and typeface without being rewritten.

ServiceCard.astroindex.astro

---import { Image } from 'astro:assets'const { service } = Astro.props--- <article class="card">  <Image src={service.image} alt="" />   <div class="card__body">    <h3>{service.title}</h3>    <p>{service.summary}</p>  </div></article> <style>  /* Tokens only. No hex, ever. */  .card {    background: var(--surface-raised);    border: 1px solid var(--line);    border-radius: var(--rounding-card);  }</style>

Basic

Card

Title and description. The base every other variant extends.

Card with action

Adds a single call to action at the foot.

Learn more

Icon card

Leads with an icon. For service or capability lists.

Outlined card

No fill. Sits directly on the page for lower-emphasis groups.

With media

Media card

Image above the copy. The default for any listing grid.

Media card with meta

Category · 1 Jan 2026

Media card with meta

Adds a category and a date above the title. For editorial.

Overlay card

Label sits on the image. For dense category grids.

Media card with tags

Chips under the title for time, diet or difficulty.

20 minsTagTag

Pricing & feature

Pricing card

Price, unit and a feature list.

$00 per unit

Feature line one
Feature line two
Feature line three

Ask about this

Pricing card, featured

Featured

The emphasised option. Exactly one per set.

$00 per unit

Feature line one
Feature line two
Feature line three

Ask about this

Feature card

A capability, with a two-column list of what it includes. Wide enough to carry three lines of description without the columns collapsing.

Included item
Included item
Included item
Included item
Included item
Included item

See examples

Rows, people & quotes

Row card

Horizontal. The whole row is one link.

$00per unit

List item

No card at all. A hairline-separated entry with meta and tags.

1 Jan 2026 · 2 min read · #tag#tag

Second entry

Shows how consecutive items separate without a border each.

1 Jan 2026 · 4 min read · #tag

Profile card

Role or title

Avatar, name and role. For team and author blocks.

Quote card

A testimonial with attribution, about as long as one of these should ever be.

Name
Role, Company

On a dark band

The same components, unchanged. The band reassigns the tokens underneath them, so neither of these knows which ground it is on.

Card on panel

Proof the base card needs no dark variant.

Learn more

Stat card

00Label here

Elsewhere

Libraries worth a look when none of the above is the right shape. Nothing from these is copied in, anything worth having gets rebuilt against our own tokens.

Watermelon UIA large, well-presented set of card compositions. Sign-in panels, team lists, recaps and media cards.ui.watermelon.shthird-party · check licence before reuse shadcn/uiThe reference for composable card anatomy: header, content and footer as separate slots.ui.shadcn.comthird-party · MIT Tailwind UI patternsMarketing and application blocks, useful for layout ideas above the level of a single card.tailwindcss.comthird-party · paid licence