---
id: "packages/active-ui/card"
title: "Card"
description: "A surface that groups one subject, with a header, an action in its corner, content and a footer."
url: "/packages/active-ui/card"
locale: "en"
revision: "91a1aecfe7125f90"
---

# Card

A card groups the content and actions of one subject on a surface of its own: a scheme, a summary,
a setting. Use cards for things a reader compares or picks from; for a single long form, the page
itself is the surface. For a figure with its label, the composed [`StatCard`](/packages/active-ui/stat-card) is ready-made.

**Example: A card with header, content and footer, and a small one**

Client: Runs entirely in your browser. Source: `examples/ui/card.tsx`.

```tsx
// apps/docs/examples/ui/card.tsx
'use client';

import {useState} from 'react';

import {Button} from '@workspace/active-ui/components/primitives/button';
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@workspace/active-ui/components/primitives/card';

/**
 * A surface that groups one subject: a header with a title, a description
 * and an action in its corner, content, and a footer with the actions on
 * the whole card. The small size suits a grid of many cards.
 */
export default function CardExample() {
  const [following, setFollowing] = useState(false);
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-[3fr_2fr]">
      <Card>
        <CardHeader>
          <CardTitle>Pension scheme 2026</CardTitle>
          <CardDescription>Defined contribution, since 2019</CardDescription>
          <CardAction>
            <Button
              variant="outline"
              size="sm"
              aria-pressed={following}
              onClick={() => setFollowing(!following)}
            >
              {following ? 'Following' : 'Follow'}
            </Button>
          </CardAction>
        </CardHeader>
        <CardContent>
          <p className="text-sm">
            214 participants, of whom 198 active. The next statement goes out on
            1 November.
          </p>
        </CardContent>
        <CardFooter className="gap-2">
          <Button>Open the scheme</Button>
          <Button variant="ghost">Download the rules</Button>
        </CardFooter>
      </Card>
      <Card size="sm">
        <CardHeader>
          <CardTitle>Contributions</CardTitle>
          <CardDescription>October 2026</CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-2xl font-semibold tabular-nums">98.4%</p>
          <p className="text-muted-foreground text-sm">collected on time</p>
        </CardContent>
      </Card>
    </div>
  );
}
```

## Usage

```tsx
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@workspace/active-ui/components/primitives/card';

<Card>
  <CardHeader>
    <CardTitle>Pension scheme 2026</CardTitle>
    <CardDescription>Defined contribution, since 2019</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>
    <Button>Open the scheme</Button>
  </CardFooter>
</Card>;
```

## Anatomy

- `Card`: the surface. `size`: `default`, or `sm` with less padding and a smaller gap.
- `CardHeader` with `CardTitle`, `CardDescription` and `CardAction`, which sits in the top right
  corner of the header.
- `CardContent` and `CardFooter`; the footer lays out its children in a row.

## What your application provides

- The heading level: `CardTitle` is a `<div>`. When the title is a heading in your page outline,
  render one inside it (`<CardTitle><h3>…</h3></CardTitle>`).
- The content and what the actions do.

## Accessibility

A card adds no semantics: it is a set of `<div>`s. Give a list of cards the structure it has, such
as a `<ul>` with an `<li>` per card, and make only the actions interactive, not the whole card,
unless the card is one link.

## API

### Card

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `size` | `"default" \| "sm"` | no | The padding and gap: `default`, or `sm` for a grid of many cards. |

### Other parts

**CardHeader**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

CardHeader has no props of its own.

**CardFooter**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

CardFooter has no props of its own.

**CardTitle**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

CardTitle has no props of its own.

**CardAction**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

CardAction has no props of its own.

**CardDescription**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

CardDescription has no props of its own.

**CardContent**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

CardContent has no props of its own.

> [!NOTE]
> **Based on shadcn/ui**
>
> This page adapts the Card documentation of shadcn/ui (MIT licence) to this
> package; see [Third-party notices](/third-party-notices).