Card
A flexible content container with optional image, title, and description.
Card Title
A brief description of the card content goes here.
Installation
npx asteria-ui add cardUsage
import { Card, CardContent, CardDescription, CardImage, CardTitle } from "@/components/ui/card";
<Card>
<CardImage src="/photo.jpg" alt="" />
<CardContent>
<CardTitle>Card Title</CardTitle>
<CardDescription>A brief description of the card content goes here.</CardDescription>
</CardContent>
</Card>Examples
Variants
default
Card content preview.
outlined
Card content preview.
elevated
Card content preview.
Interactive
Clickable card
Entire card is a role="button" — Enter/Space activates it.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outlined" | "elevated" | "default" | Visual style of the container. |
| onClick | (event: MouseEvent) => void | — | Makes the card interactive — role="button", focusable, Enter/Space activates. |
Accessibility
Accessibility
Static cards. Rendered with
role="article".Interactive cards. Passing
onClickswitches the card torole="button", addstabIndex=0, and wires Enter/Space to activate it, matching a real button.Tab order. Interactive elements nested inside a card (e.g. a secondary link or button) remain independently focusable via Tab.
Focus ring. Visible on Tab via
shadow-glow-focus, only on interactive cards.Contrast. Ensure sufficient color contrast between the card background and its content text — all variants use semantic foreground/background tokens that meet this by default.
When to use
Use to group related content — product listings, user profiles, dashboard widgets, article previews. Cards work best in grids or lists.
Do:
- Keep a clear content hierarchy (image → title → description)
- Make the entire card clickable when it represents one action
- Use consistent sizes within the same grid
Don't:
- Overload a card with too many actions
- Mix variants within the same grid
- Nest cards inside cards