{
  "title": "Card",
  "description": "Container surface for grouping related content with optional header, body, and footer.",
  "url": "/docs/components/card",
  "since": "0.2.0",
  "tags": [
    "display",
    "container"
  ],
  "platform": "both",
  "source": "---\ntitle: Card\ndescription: Container surface for grouping related content with optional header, body, and footer.\nsince: 0.2.0\ntags: [display, container]\nplatform: both\ncategory: display\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Card\" />\n\n## At a glance\n\n- Compose `Card` with `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, and `CardFooter` for the conventional layout.\n- Card is a content container — use a [Dialog](/docs/components/dialog) for floating surfaces.\n- `CardTitle` ships with heading semantics so screen readers announce sections in document order.\n\n## Preview\n\n<Preview name=\"card-basic\" />\n\n## Anatomy\n\n| Subcomponent | Role |\n|---|---|\n| `Card` | Outer surface — border, background, rounded corners. |\n| `CardHeader` | Top section with comfortable padding. |\n| `CardTitle` | Heading text inside the header. Renders with `role=\"heading\"`. |\n| `CardDescription` | Muted subtitle paired with the title. |\n| `CardContent` | Body content area. |\n| `CardFooter` | Footer row — actions sit here, separated by a divider. |\n\nYou don't have to use the subcomponents — `Card` accepts any children directly when you want a different layout. The subcomponents exist so the most common case is one import line and obvious spacing.\n\n## Props\n\n<PropsTable component=\"Card\" />\n\n### CardHeader / CardContent / CardFooter\n\n<PropsTable component=\"CardHeader\" />\n\n### CardTitle / CardDescription\n\n<PropsTable component=\"CardTitle\" />\n"
}