Card
A composable surface with optional header, content, footer, and title actions.
Release readiness
Component freeze
48 components approved for release.
Ready
Accessibility audit
Keyboard and contrast checks passed.
Ready
Migration guide
Waiting for platform review.
Review
Owner · Mira Chen
Updated 4 min ago
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardLeading,
CardTitle,
CardTrailing,
} from "raft-ui";
<Card>
<CardHeader>
<CardLeading />
<CardTitle />
<CardTrailing />
<CardDescription />
</CardHeader>
<CardContent />
<CardFooter />
</Card>Compose CardTitle and CardTrailing as siblings inside CardHeader, then use CardContent for supporting controls.
DMs, direct mentions, and followed thread replies
Use CardLeading when an enabling control precedes CardTitle, then reveal its configuration in CardContent.
Enable app notifications
Use CardFooter for brief guidance that describes the whole setting, optionally paired with a related action or documentation link.
Security alerts
New sign-ins
Alert owners when a new device accesses the workspace.
Permission changes
Report changes to owner and administrator access.
Recovery attempts
Notify owners when account recovery is requested.
Use CardHeader alone for a compact preference, with CardTitle and CardTrailing composed as direct children.
Place a card-level action in CardContent and align it to the lower trailing edge.
Log out
Compose identity, profile fields, and related actions through the card parts on a full-width settings surface.
Example User
Use inset when a card contains a dense cluster of controls or nested components that need stronger visual separation. Prefer default for isolated cards or lower-density information.
Workspace safeguards
External links
Require approval before opening untrusted domains.
File downloads
Block files that have not completed verification.
Inactive sessions
Archive sessions after thirty days without activity.
variant...props| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "inset" | — | Visual surface variant; inset renders a nested content well, default a single surface. |
...props | useRender.ComponentProps<"div"> | — | Visual surface root for caller-owned content. Use inset for a nested content well; default keeps a single surface. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Top region that arranges an optional CardLeading, CardTitle, CardTrailing, and CardDescription. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Primary card heading. Use render to choose the heading level for the page context. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Leading header region for a caller-owned icon, avatar, switch, or action. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Supporting copy placed after CardTitle inside CardHeader. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Trailing header region for a caller-owned status, switch, or action. |
...props| Prop | Type | Default | Description |
|---|---|---|---|
...props | useRender.ComponentProps<"div"> | — | Main content region. Forms, lists, and product sections remain explicit children. |