Card

Card container with optional border and variant-based background.

Calacatta Oro

Natural marble field tile, polished, with warm gold veining.

In stock

Usage

import { Card, CardAction, cardAnatomy, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@desk/ui/components/card";

Compose structure with CardHeader/CardContent/CardFooter rather than raw padded divs — the root supplies the gap rhythm and footer padding via data-slot selectors.
Pass shadow={false} when stacking cards on a muted/shaded canvas — colour contrast separates them and per-card shadows read as noise.
For a full-bleed media/CTA panel use an editorial composite (EditorialCard), not Card — Card is a neutral padded container, not a marketing surface.

Prop	Type	Description
border	`BorderStyle`
shadow	`boolean`	Whether the card casts a shadow. Defaults to true (each variant's own shadow). Set to false for flat cards on a shaded canvas — e.g. several cards stacked on a muted-background page/panel, where the color contrast alone separates them and a shadow on every one would be redundant.
testId	`string`
variant	`"muted" \| "ghost" \| "accent" \| "card" \| null \| undefined`

Prop	Type	Default	Description
asChild	`boolean`		Merge props onto child

Prop	Type	Default	Description
asChild	`boolean`		Merge props onto child
border	`boolean`		Render a bottom border

Prop	Type	Default	Description
asChild	`boolean`		Merge props onto child

Card

card

Container for grouped content

CardHeader

card-header

Header area with title and optional action

CardTitle

card-title

Main heading

CardDescription

card-description

Subheading or summary

CardAction

card-action

Action button or link

CardContent

card-content

Main content area

CardFooter

card-footer

Footer with actions or metadata

Used by