Card
General-purpose content surface anatomy.
Example
A representative composition rendered with the published package API.
Default
General content surface.
Connected resources: 18
Muted supporting surface
Elevated layered surface
Options
The decisions most consumers need to make when adopting this family.
variantdefault · muted · elevated
Prefer default. Use elevation only where layering is meaningful.
interactivefalse (default) · true
Set when the whole card is a link or entry point. The card lifts on hover and focus; static cards never move.
tonedefault · brand · supporting · highlight
Brand (burgundy) and supporting (green) are light-on-dark service tiles; highlight (peach) is for case studies and callouts. Add ds-supergraphic for the dotted rings. Never put a table or chart on a toned card.
| Option | Values or anatomy | Guidance |
|---|---|---|
variant | default · muted · elevated | Prefer default. Use elevation only where layering is meaningful. |
interactive | false (default) · true | Set when the whole card is a link or entry point. The card lifts on hover and focus; static cards never move. |
tone | default · brand · supporting · highlight | Brand (burgundy) and supporting (green) are light-on-dark service tiles; highlight (peach) is for case studies and callouts. Add ds-supergraphic for the dotted rings. Never put a table or chart on a toned card. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { Card, CardContent, CardDescription, CardFooter, CardHeader } from "@conscia-labs/design-system";