Card
A composable content container with Header, Title, Description, Content, and Footer parts.
Features
- Six composable parts
- Headless styling
- Semantic defaults
- Ref forwarding
Installation
npm install @ariaui/card
Examples
Each playground is a self-contained snippet: account form (native inputs), basic layout slots, login with Input and Button, meeting notes with Avatar.Group, and a wide card with a media block and lucide-react badges.
Surfaces use semantic tokens (bg-card, border-border, text-foreground, text-muted-foreground, etc.).
Account form
Header, description, two fields, and footer actions using native controls and semantic surface tokens.
No preview output yet.
Basic layout
Minimal card with title, description, and placeholder regions in content and footer.
No preview output yet.
Login
Uses Input.Root and Button.Root from their packages alongside Card parts.
No preview output yet.
Meeting notes
Long-form body text and an Avatar.Group row in the footer.
No preview output yet.
With image area
Media-sized gradient block and icon badges in the footer.
No preview output yet.
Anatomy
import * as Card from "@ariaui/card";
export default function Example() {
return (
<Card.Root>
<Card.Header>
<Card.Title />
<Card.Description />
</Card.Header>
<Card.Content />
<Card.Footer />
</Card.Root>
);
}
API Reference
Root
Outermost container for the card. Renders a `div` and forwards all props including `className` for styling.
Header
Groups Title and Description at the top of the card. Renders a `div`.
Title
The card heading. Renders an `h3` element by default.
Description
Supporting text below the Title. Renders a `p` element.
Content
Main body of the card. Renders a `div` for arbitrary content such as forms, images, or lists.
Accessibility
Card is a structural primitive with no built-in interactive behaviour or ARIA roles. Accessibility depends on the content you place inside:
- Use
Card.Title(h3) for a meaningful heading. Change the heading level to match your document outline. - Keep form labels, buttons, and links inside the card fully accessible with proper
htmlFor,aria-label, and focus management. - If the entire card is clickable, wrap it in an anchor or button and ensure it has a clear accessible name.
Not a landmark
Cards do not map to an ARIA landmark role. If you need a self-contained section with its own heading, wrap in a section element with aria-labelledby pointing at the title.