Card

Off-white unit surface on a hairline — header/body/footer slots, border options, and a whole-card interactive mode. No shadows, ever.

stable

Overview

The Card is the unit surface of the language: --card fill on a 1px --hairline, --radius-card (12), --space-6 padding. Depth is expressed with hairlines, never shadows — the interactive hover “elevation” is a border strengthen plus a subtle rise from the motion tokens.

import { Card } from "@cronwerk/ui";

Use it for one unit of content — an offer, a catalog entry, a settings group. For page zones, reach for Panel; see the surfaces usage guide for the full decision tree.

Examples

Off-white surface

Hairline border, radius-card, no shadows — ever.

Basic source

<Card>
<h3>Off-white surface</h3>
<p>Hairline border, radius-card, no shadows — ever.</p>
</Card>

Body copy between the header and the bottom-pinned footer.

Slots — header / body / footer source

<Card header={<Chip>Header slot</Chip>} footer={<Button variant="outline" size="nav">Footer action</Button>}>
<p>Body copy between the header and the bottom-pinned footer.</p>
</Card>

hairline

strong

none

Border options source

<Card>hairline</Card>
<Card border="strong">strong</Card>
<Card border="none">none</Card>

The whole card is one link — a single tab stop.

Interactive — whole-card link source

<Card href="/guides/surfaces" header={<h3>Surfaces guide</h3>}>
<p>The whole card is one link — a single tab stop.</p>
</Card>

Props

Generated from the component’s TypeScript types — never hand-written.

Prop	Type	Default	Description
header	`ReactNode`	—	Optional header slot above the body.
footer	`ReactNode`	—	Optional footer slot below the body (bottom-pinned when stretched).
border	`"hairline" \| "strong" \| "none"`	`hairline`	Border treatment.
href	`string`	—	Interactive mode: the whole card becomes a single link (one tab stop).

Usage

Do

Use the footer slot for actions so equal-height cards in a grid keep their CTAs aligned on the bottom edge.

Don't

Don’t nest a card on a card — two surface levels (panel → card) is the deepest legal stack.

Accessibility

A static card is a plain container — bring your own heading structure. With href, the card renders exactly one <a> spanning the surface (a single tab stop) whose accessible name comes from the card content; do not nest further links or buttons inside it. The hover rise collapses under prefers-reduced-motion.