Source: https://monarchui.dev/components/card/

Components · Data display

# Card

Grouped content surface.

@rookcom/monarch-react

Component

## Variants

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

A bordered surface that groups related content, with optional header, content and footer parts.

### Use when

- Grouping one topic on a page, such as a summary or a form section.
- Wrapping a table (`flush`).

### Avoid when

- Showing a single KPI: use StatCard.
- A page-level settings group: use SettingsSection.

## Design principles

- `outline` (default) for most content, `raised` for floating panels, `subtle` inside other cards.
- CardTitle defaults to h3 and takes `as` so it fits the page outline.

## API reference

```tsx
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Card` | component | server-safe | `.mn-card` |
| `CardContent` | component | server-safe | `.mn-card` |
| `CardDescription` | component | server-safe | `.mn-card` |
| `CardFooter` | component | server-safe | `.mn-card` |
| `CardHeader` | component | server-safe | `.mn-card` |
| `CardTitle` | component | server-safe | `.mn-card` |

Every part is a plain element (`div`, heading, `p`) and passes native attributes through.

Generated from the TypeScript declarations of `packages/react/src/components/data-display/card`.

## Properties

### `Card`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `flush` | `boolean` | Remove inner padding, e.g. for a card wrapping a table. |
| `id` | `string` |  |
| `variant` | `"subtle" \| "outline" \| "raised"` | `outline` (default) for most content, `raised` for floating panels, `subtle` inside other cards. |

### `CardContent`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

### `CardDescription`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

### `CardFooter`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

### `CardHeader`

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

### `CardTitle`

| Prop | Type | Description |
| --- | --- | --- |
| `as` | `"h2" \| "h3" \| "h4"` | Heading level that fits the page outline. Default h3. |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `id` | `string` |  |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `variant` | `'outline'``'raised'``'subtle'` | Surface treatment. Default `outline`. Exposed as `data-variant`. |
| `flush` | `'true'``'false'` | Removes the content padding, e.g. for a card wrapping a table (`data-flush`). |
| `CardTitle as` | `'h2'``'h3'``'h4'` | Heading level. Default `h3`. |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Static | – | Card has no interactive states of its own. |

## Interaction behaviour

- None. Interactive content inside the card keeps its own behaviour.

## Keyboard support

Not interactive, so there is no keyboard behaviour.

## Accessibility

Role

none (div); CardTitle is a heading

Accessible name

–

- CardTitle renders a real heading (h3 by default); choose `as` so heading levels do not skip.
- The card adds no landmark or role; add `aria-labelledby` with a region role yourself if it needs one.

## Responsive behaviour

- No breakpoints: the card fills the width its container gives it.

## Theme support

- Borders and surfaces use Monarch semantic tokens, so every theme applies automatically.

## Do and don't

### Do

- Set CardTitle `as` to match the page outline.
- Use `flush` when a table fills the card.

### Don't

- Do not nest `outline` cards; use `subtle` for an inner card.
- Do not make the whole card a click target without a real link or button inside.

## Related components

- [StatCard](https://monarchui.dev/components/stat-card/): A single KPI.
- [SettingsSection](https://monarchui.dev/components/settings-section/): Titled settings groups.
- [SectionCard](https://monarchui.dev/components/section-card/): Planned card with a section header.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | None |
| Monarch components | None |

## Testing coverage

- Renders CardTitle as an h3 by default.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/data-display/card`

## All example code

### Variants

```tsx
import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@rookcom/monarch-react';

{(['outline', 'raised', 'subtle'] as const).map((v) => (
  <Card key={v} variant={v} style={{ width: '16rem' }}>
    <CardHeader>
      <CardTitle>Open tickets</CardTitle>
      <CardDescription>{v} card</CardDescription>
    </CardHeader>
    <CardContent>128</CardContent>
    <CardFooter>
      <Button size="sm">View</Button>
    </CardFooter>
  </Card>
))}
```