Card
Cards group related content and actions into a single, self-contained surface.
Use the Card component to present a unit of related content, such as a summary, a product, or a settings group. Compose it from the Card parts to get consistent spacing and structure.
Import
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardAction,
CardContent,
CardFooter,
CardMedia,
} from "@puzzle-ui/ui";Basic usage
Variants
Use variant to set the surface style: outlined (default), elevated, filled, or ghost.
Size
Use size (sm, md, lg) to control the card's spacing. The default is md.
Header action
Place a CardAction inside CardHeader to add a control, such as a button, next to the title.
Orientation
Set orientation="horizontal" to lay media and content side by side. The default is vertical. Use CardMedia for the image or other visual.
Interactive cards
Set interactive to add hover and focus styling when the whole card is clickable. Render it as a link or button with as so it is keyboard accessible.
When interactive is set without as, the card renders a button (or an a when href is passed) so it is keyboard operable. Do not combine interactive with as="div": it only adds styling, not semantics.
API reference
Card props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "div" | Element type used to render the card. |
variant | "elevated" | "outlined" | "filled" | "ghost" | "outlined" | Surface style. |
size | "sm" | "md" | "lg" | "md" | Spacing scale. |
orientation | "vertical" | "horizontal" | "vertical" | Direction in which the card's parts are laid out. |
interactive | boolean | false | Adds hover and focus styling for clickable cards. |
className | string | — | Additional CSS class names. |
children | ReactNode | — | Card content. |
Card parts
| Component | Default element | Purpose |
|---|---|---|
CardHeader | div | Groups the title, description, and action. |
CardTitle | h3 | Card heading. Change the level with as. |
CardDescription | p | Supporting text for the title. |
CardAction | div | Control placed alongside the title. |
CardContent | div | Main body of the card. |
CardFooter | div | Actions or metadata at the end of the card. |
CardMedia | div | Image or other visual. |
Every part accepts as, className, children, and the props of the element it renders.
Element props
Card accepts the props of the element selected by as, passed through to it.
TypeScript types
The component exports CardProps, CardPartProps, CardVariant, CardSize, and CardOrientation.
Accessibility
CardTitlerenders an<h3>. Useasto pick the level that fits the page's heading hierarchy.- For a clickable card, render the card as
aorbuttonwithasrather than adding a click handler to adiv. Avoid nesting other interactive controls inside it. - The card has no implicit role. Add
role,aria-labelledby, or similar only when the card represents a meaningful landmark or group.