Card

A card shows one thing among others: its name, a title, a line of writing and a picture of it that can run off the card’s foot and end edge and be cut there, never framed. Cards stand side by side in a slide or a grid. Ordinary writing still sits straight on the paper; a card is not a box for a page’s paragraphs.

Design examples

Two exhibition cards

Example Code

An outlined card and a filled card show different emphasis with the same title and label structure.

Try it

A thing shown on its own fill

Example Code

Its name, a title and a picture that runs off the foot. With href the whole card is one link.

Outlined, with writing

Example Code

variant="outlined" draws a 1px line and no fill.

Use it

<ds-card href="/lists" tone="sharp-blue" width="14" height="22" media="center">
  <span slot="label">Lists</span>
  <span slot="title">Everything on one grid</span>
  <img slot="media" src="lists.webp" alt="A list on a phone" />
</ds-card>

Attribute	What it does
href	The whole card is one link.
interactive	The whole card is one press target that fires ds-card-press; use href for a destination.
tone	A palette colour for the fill (sharp-blue, apple-green, pink, orange…), drawn as its pastel and dim in dark mode, or ink for the ink with the paper’s words. The quiet fill by default.
variant	filled (the default) or outlined, a 1px line and no fill.
width, height	The size in whole squares.
padding	none, small (half a square), medium (one, the default) or large (two).
media	Where the picture stands: start, center or bleed (on to the end edge and down to the foot, its corners there the card’s).
disabled	Neither pressed nor followed.

Slot	Holds
label	The thing’s name, muted, on one square.
title	The title in the display size, a square and a half a line, so a title that wraps stays together.
(default)	Writing, one square a line.
media	A picture, a square below the words.

The corners are a card’s (--ds-radius-card, 4px by default); a product sets --ds-card-corner-size for rounder ones.

Accessibility

• A card with href is one link and a card with interactive one button: never put a second link or button inside either. Keyboard focus rings it 2px inside.
• The pointer tints the card; nothing in it moves.

Slide · Row