Card

Usage

import { Card, CardContent, CardHeader, CardTitle } from "@workshop1/ui/components/card"

Use a card when elevation communicates that a subject is a bounded object. Prefer spacing, a separator, or a table for flat page structure. Do not nest cards.

CardHeader aligns an optional CardAction with the title and description. CardFooter owns the separated action surface. Use size="sm" for denser supporting content, not to squeeze a complex form into a small container.

Accessibility

Choose semantic elements inside the card: a heading for the title, a list for a collection, and buttons or links for actions. The card container itself does not imply a landmark or click target.