Components · Data display
Card
Grouped content surface.
Variants
Open tickets
outline card
128
Open tickets
raised card
128
Open tickets
subtle card
128
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>
))}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,raisedfor floating panels,subtleinside other cards.- CardTitle defaults to h3 and takes
asso it fits the page outline.
API reference
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
asso heading levels do not skip. - The card adds no landmark or role; add
aria-labelledbywith 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
asto match the page outline. - Use
flushwhen a table fills the card.
Don't
- Do not nest
outlinecards; usesubtlefor an inner card. - Do not make the whole card a click target without a real link or button inside.
Related components
- StatCard: A single KPI.
- SettingsSection: Titled settings groups.
- SectionCard: 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