A bordered surface grouping related content, with a heading at the level you choose.
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
For teams of up to 15 people.
Shared libraries, roles and a single bill.
Default, code
<Card>
<CardHeader>
<CardTitle>Team plan</CardTitle>
<CardDescription>For teams of up to 15 people.</CardDescription>
</CardHeader>
<CardContent><p className="text-body-md">Shared libraries, roles and a single bill.</p></CardContent>
<CardFooter><Button>Upgrade</Button><Button variant="ghost">Compare plans</Button></CardFooter>
</Card>Two-factor authentication and signed-in devices.
The whole card is one link; there is nothing else to press inside it.
Link card, code
<Card>
<CardHeader>
<CardTitle href="#security">Security</CardTitle>
<CardDescription>Two-factor authentication and signed-in devices.</CardDescription>
</CardHeader>
<CardContent><p className="text-body-sm text-fg-secondary">The whole card is one link; there is nothing else to press inside it.</p></CardContent>
</Card>The 11 design tokens Card reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
| Token | Value now | CSS variable |
|---|---|---|
| card.bg | … | --sd-card-bg |
| card.border | … | --sd-card-border |
| card.fg | … | --sd-card-fg |
| card.fg-secondary | … | --sd-card-fg-secondary |
| card.padding | … | --sd-card-padding |
| card.radius | … | --sd-card-radius |
| elevation.1 | … | --sd-elevation-1 |
| spacing.gap.md | … | --sd-spacing-gap-md |
| spacing.inset.lg | … | --sd-spacing-inset-lg |
| spacing.stack.md | … | --sd-spacing-stack-md |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@superduperui/react"Screen readers announce "Team plan, heading level 3".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2.
Compact density meets AA (2.5.8, 24px targets), not AAA.
Shared patterns it ships with: 2.4.10 (headingLevel).
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 140 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 16 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 2 of 2, Firefox 2 of 2, WebKit 2 of 2 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the one link in the card |
| Enter | Enter follows it |
The Figma component is Card, with Type (Static, Link); State (Default, Hover, Focus). The Figma library isn’t published yet.
Figma to code: Type (Static, Link = href); State (Default, Hover, Focus; preview only); Title → CardTitle children; Description → CardDescription children when Show description; Content → CardContent children when Show content; Body → CardContent children (any content: fields, lists); Icon → Icon icon (inside CardHeader) when Show icon.