Skip to content

Card

Groups one record or topic. 8px radius, a hairline border, no shadow. To make a card clickable, wrap it in a link.

Sourcecomponents/card.tsx

Checkout redesign

Updated 2 hours ago

12 screens, 3 waiting for review.

In review

Billing settings

Plan, invoices and payment method.

Briefs shipped this month

128

+12% on last month

Usage

Card usage
import { Button } from "@/components/button";import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/card";
export function CardUsage() {  return (    <Card>      <CardHeader>        <CardTitle>Checkout redesign</CardTitle>        <CardDescription>12 briefs · updated today</CardDescription>      </CardHeader>      <CardContent>Two briefs are waiting for review.</CardContent>      <CardFooter>        <Button variant="outline">Open project</Button>      </CardFooter>    </Card>  );}

When to use

Use when

Grouping one record or topic on a surface (8px radius, border, no shadow). For a card that is one link, use CardLink

Don’t use when

Wrapping every section of a page in cards; nesting cards