Skip to content
Site volume
Colourway

Components

Card

A ruled plate with media, header, body and footer; with `href` the whole card is one link that lifts on hover.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/card
On this page

Example#

Look of this example
Live render of examples/card/basic.tsx

Usage#

Use a card for one item in a collection that people compare and open: a case study, a post, a product. With href, the whole card is one link; it lifts on hover and takes a hard offset, like a plate pulled off the press.

  • Parts. title (required, heading level 3 by default), eyebrow, media (top, or start beside the text), the body, and a footer for proof such as numbers.
  • Plates. white (default), stock or sunken; size sm or md sets the padding.
  • Links inside a link card sit above the stretched title link, so they still work.
  • Selected holds the lift and a 3 px rule, for choosers.
  • One thing per card. A card that needs two actions is probably a section.

Anatomy#

The parts of examples/card/basic.tsx, numbered:
  1. Eyebrowdata-mk-part="eyebrow"
  2. Titledata-mk-part="title"
  3. Bodydata-mk-part="body"
  4. Footerdata-mk-part="footer"

Volume#

Reading layer: the card is identical at every volume. Its media slot can hold art that follows the volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Title: the item's name and its point, such as "Fernlight: from five taps to two".
  • Body: one or two sentences; a card is a door, not the room.
  • Footer: the checkable proof, such as numbers with their units.

Do and don't#

Do

One link, the whole card.

Don't

Three competing links inside one card.

A link card is one destination. Extra links inside it make a small target maze and repeat what the card already does.

Accessibility#

  • A link card has one link, the title, stretched over the card; other links inside sit above it.
  • The focus ring is drawn on the card through :has(:focus-visible).
  • The heading level is yours (titleLevel, default 3).

Props#

PropTypeDefaultDescription
title requiredReactNodenone
titleLevel2 | 3 | 43Default 3.
eyebrowReactNodenone
mediaReactNodenone
mediaPlacement"start" | "top"none
footerReactNodenone
hrefstringnoneA link card: the title links here and the whole card is its target.
linkRenderRenderPropnoneReplaces the title link (e.g. `<NextLink href="/work/fernlight" />`).
renderRenderPropnone
plate"stock" | "sunken" | "white"whiteDefault `white`.
size"md" | "sm"none
selectedbooleannone
childrenReactNodenone

Plus 278 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from CardProps in packages/overprint-react/src/reading/card/card.tsx.

Tokens#

System tokens (14)

Its own properties (2)

  • --mk-card-offset
  • --mk-card-pad

Scanned from its CSS at build and checked against its registry entry; 6 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry
  • Patchreact, threeReact: the label role (14 px, now 600) prints in --mk-text in Eyebrow, the Card and PageHero eyebrows, SpecStrip labels, the stacked table's cell headers, the Navbar panel's meta and the NavSheet group titles, because no secondary ink reaches the label's floor; placeholders, input start and end text and the select's empty choice print in the new --mk-on-control-2; Art interactive marks no layer, so the 3D stage's own art and plate layers decide (its caption and keys never sit inside an art layer). Read the whole entry