Card
Cards with a header action, hairline sections, a soft footer band and a whole-card link.
Outstanding
Open and overdue invoices
$24,180.50
$2,150.50 of it is overdue
Installation
npx shadcn@latest add @quireui/cardUsage
<Card>
<CardHeader action={<Button size="icon" variant="ghost" aria-label="Options"><DotsThreeIcon /></Button>}>
<CardTitle>Outstanding</CardTitle>
<CardDescription>Open and overdue invoices</CardDescription>
</CardHeader>
<CardContent>…</CardContent>
<CardFooter>…</CardFooter>
</Card>CardHeader takes an action, like a menu or a button, and lines it up with the title, so a header never needs its own layout. CardFooter sits on a soft band in the same tint as a table's totals, and always at the bottom, so footers line up across a row of cards of different heights.
Sections
CardSection splits a card into parts, like groups of settings. A hairline between sections stops short of the edges, the same as the table's dividers.
Reminders
What customers get when an invoice is due.
Before the due date
A friendly note 3 days ahead.
When it is late
Every 7 days until it is paid.
Whole-card links
Put a CardLink on the title and the whole card opens it. It stays one real link, so Tab reaches it once, middle-click and "open in new tab" work, and the card's border lifts on hover and rings on keyboard focus. Buttons and menus in the card keep their own clicks.
Accessibility
A card is a section. With a CardLink, screen readers hear one link named after the title, rather than every line of the card.
A card itself takes no focus. With a CardLink, Tab reaches the link and the whole card shows the focus ring; Enter opens it. Controls inside the card are reached in order after it.
API reference
Card
A surface for one piece of the page: a summary, a settings group, an item in a grid.
Also takes every <section> attribute. Style it with [data-slot="card"].
CardHeader
Title, description and an optional action on the right, like a button or a menu.
Prop
Type
Also takes every <div> attribute. Style it with [data-slot="card-header"].
CardTitle
Also takes every <h3> attribute. Style it with [data-slot="card-title"].
CardDescription
Also takes every <p> attribute. Style it with [data-slot="card-description"].
CardContent
Also takes every <div> attribute. Style it with [data-slot="card-content"].
CardSection
One part of a card with several, like groups in a settings card. Sections are split by a hairline that stops short of the edges, like the table's dividers.
Also takes every <div> attribute. Style it with [data-slot="card-section"].
CardFooter
Actions or a total, on a soft band in the same tint as a table footer.
Also takes every <div> attribute. Style it with [data-slot="card-footer"].
CardLink
Makes the whole card open one place. Put it on the title: it stays one real link for the keyboard, middle-click and "open in new tab", while buttons in the card keep their own clicks.
Also takes every <a> attribute.