Card
A surface that groups one subject, with a header, an action in its corner, content and a footer.
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 Stat is ready-made.
214 participants, of whom 198 active. The next statement goes out on 1 November.
98.4%
collected on time
// 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#
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, orsmwith less padding and a smaller gap.CardwithHeader Card,Title CardandDescription Card, which sits in the top right corner of the header.Action CardandContent Card; the footer lays out its children in a row.Footer
What your application provides#
The heading level:
Cardis aTitle <div>. When the title is a heading in your page outline, render one inside it (<Card).Title><h3>…</ h3></ Card Title> 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#
Import from @workspace/
Props
- Type
"default""sm"- Default
'default'
The padding and gap: default, or sm for a grid of many cards.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Other parts#
Parts that take only their element’s attributes
Card: the attributes of aHeader <div>, with className and ref.Card: the attributes of aTitle <div>, with className and ref.Card: the attributes of aAction <div>, with className and ref.Card: the attributes of aDescription <div>, with className and ref.Card: the attributes of aContent <div>, with className and ref.
This page adapts the Card documentation of shadcn/ui (MIT licence) to this package; see Third-party notices.