Card

Displays content in a contained box with optional header, content, and footer sections.

Installation

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@gradeui/ui"

Usage

Card Title

Card Description

Card Content

Card Footer

Examples

Project Card

Marketing Site

Live

Deployed from main, 2 hours ago

1,284

Visits today

Simple Card

Notifications

You have 3 unread messages.

Stats Card

Active users today

6,210

+12% from yesterday

Card with Actions

Settings

Manage your workspace preferences.

Configure how your workspace behaves and connects to external services.

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes for the card container.

All Card sub-components (CardHeader, CardTitle, CardDescription, CardContent, CardFooter) accept the same className prop for customization.

Accessibility

Cards are semantic containers using div elements
Use appropriate heading levels in CardTitle
Ensure sufficient color contrast for text
Interactive elements within cards should be focusable

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/card.md and shipped inside the published @gradeui/ui tarball.

---
name: Card
import: "@gradeui/ui"
subcomponents: [CardHeader, CardTitle, CardDescription, CardContent, CardFooter]
props:
  - Each subcomponent accepts native div HTML attrs (className, etc.)
  - No variants — Card is a flexible container surface
when_to_use: Grouped content with a distinct surface — settings panels, dashboard tiles, list-of-cards layouts. Pair CardHeader (title + description) with CardContent and optional CardFooter (actions).
composes_with: [Button (in CardFooter), Badge, Separator, Avatar, any form controls]
aliases: [card, group box, groupbox, panel, tile, surface]
---

Canonical structure — do NOT skip CardHeader if the card has a title:

```jsx
<Card>
  <CardHeader>
    <CardTitle>Billing</CardTitle>
    <CardDescription>Manage your subscription.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button>Save</Button>
  </CardFooter>
</Card>
```

Badge

Chart