Card
A surface that holds content. It paints; it does not arrange.
import { Card } from "@dede-style/ui/card", then <Card elevation="raised">…</Card>. Width comes from the lane it sits in and the rhythm of its children comes from the Sleeve underneath it, so the only things this component decides are the fill, the edge, the shadow and the inset.
Reserved seating
A card is a fill, an edge and an inset around something. The something is ordinary content, spaced by the Sleeve underneath — which is why two paragraphs sit correctly here without the card knowing they are paragraphs.
Change the inset and watch this text move; change the rung and watch the ground move under it.
| Prop | Description | Default | Control |
|---|---|---|---|
| elevation | raised (default) sits above the page, flush on it, sunken below itsunkenflushraised | raised |
|
| border | draw the card's edge. Off keeps the card the same size | true | |
| padding | space inside the card, a fixed spacing step. none lets an image reach the card's edgesnone345681012 | 6 |
|
| gap | space between the card's children. none puts an image flush against the content below itnone12346 | 3 |
|
| justify | where the card's children sit across it. Default stretch fills the card's widthstretchstartcenterend | stretch |
|
Tokens
What a theme can move, where the props above are what an instance can move.
| Token | Description | Value |
|---|---|---|
| --card-radius | the corner. No suffix, unlike --button-radius-rounded, because Card has no shape prop carving out one case of three — this is the radius of cards. Move it to make cards rounder or squarer than the buttons and inputs beside them; leave it and every corner in the system moves together from --radius-4 | --radius-4 |
A token appears here only when the value is not already reachable. Anything that resolves through a foundation token or a role needs none, because overriding that already moves it — and a second dial wired to the same value would let this one component drift from everything sharing the role. What is left is the values with no other lever at all.
These are public and overridable — there is no private custom property, because anything on :root is reachable by any stylesheet. What replaces privacy is a stability contract: primitives may move, roles are the guarantee, and these are the per-component escape from both.