Card
A surface that groups related content and actions into a single block.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add cardnpm packages installed: radix-ui.
import { Card } from "@/components/ui/card";Default
Content Only
Stat
<Card>
Plus every attribute of <div>.
<CardHeader>
Plus every attribute of <div>.
<CardTitle>
| Prop | Type | Default |
|---|---|---|
asChildRenders the child element instead of an | boolean | — |
Plus every attribute of <h3>.
<CardDescription>
Plus every attribute of <p>.
<CardContent>
Plus every attribute of <div>.
<CardFooter>
Plus every attribute of <div>.
Card renders a plain div with no implicit landmark. CardTitle is an h3 by default — use asChild to set the level the page actually needs, since heading levels must increase by one, or to render something that is not a heading at all.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes