Card
Elevated surface for grouping related content. Compose Header, Content, and Footer slots freely.
Install
Import path
Examples
Spacing
Use negative margins with -mx-(--card-spacing) to make content go edge to edge while keeping it aligned with the card inset. When the edge-to-edge content sits above a footer, use -mb-(--card-spacing) on CardContent to remove the section gap.
These terms govern your use of the workspace, including access to shared documents, project files, and collaboration tools.
You are responsible for the content you upload and for ensuring that your team has the appropriate permissions to view or edit it.
We may update features or limits as the service evolves. When those changes materially affect your workflow, we will notify your workspace administrators.
By continuing, you agree to keep your account credentials secure and to follow your organization's acceptable use policies.
Image
Add an image before the card header to create a card with an image.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Size
Use the size='sm' prop to set the size of the card to small. The small size variant uses smaller spacing.
The card component supports a size prop that can be set to "sm" for a more compact appearance.
Spacing
In addition to the size prop, you can use the --card-spacing CSS variable to control the spacing between sections and the inset of card parts.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Card, CardHeader, CardTitle, CardDescription,
CardAction, CardContent, CardFooter,
} from "@codefast/ui/card";
<Card>
<CardHeader>
<CardTitle>…</CardTitle>
<CardDescription>…</CardDescription>
<CardAction>…</CardAction>
</CardHeader>
<CardContent>…</CardContent>
<CardFooter>…</CardFooter>
</Card>
API reference
Props for each part of the component. All native element props are also forwarded.
Card
The surface. Every part below is a styled <div> you can omit or reorder.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Compose width, shadow, and spacing — the card owns no layout of its own. |
CardHeader / CardFooter / CardContent
Layout slots.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | CardHeader hosts CardTitle, CardDescription, and an optional CardAction. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Card is a presentational container with no implicit role — structure content with real headings.
- When a whole card is clickable, wrap it in a single link/button rather than nesting interactives.
- Use CardTitle as a real heading level that fits the surrounding document outline.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Group genuinely related content; one idea per card.
- Keep actions in CardFooter or CardAction so they’re easy to find.
Don’t
- Don’t nest cards inside cards — it muddies hierarchy.
- Don’t put more than one primary action in a single card.