Card

Demos

A header and content.

ApoB

Collected 12 Oct, after a 10 hour fast.

78 mg/dL

Optimal range is below 90 mg/dL.

"use client"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@workspace/ui/components/card"

export function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>ApoB</CardTitle>
        <CardDescription>Collected 12 Oct, after a 10 hour fast.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-2xl font-medium tabular-nums">
          78 <span className="text-sm text-muted-foreground">mg/dL</span>
        </p>
        <p className="text-muted-foreground">Optimal range is below 90 mg/dL.</p>
      </CardContent>
    </Card>
  )
}

Usage

Use a card to group one result, one appointment, or one summary so it reads as a unit. Do not nest cards. If everything on a page is a card, nothing stands out.

Import it from @workspace/ui/components/card.

Anatomy

Card — The surface. size sets the inner spacing.
CardHeader — Holds the title, description, and action.
CardTitle — The card heading.
CardDescription — Muted supporting text under the title.
CardAction — Sits at the top right of the header.
CardContent — The main body.
CardFooter — Actions at the bottom. Add border-t for a divider.

Notes

An image placed first inside Card runs to the top edge with rounded corners.
Add border-b to CardHeader to separate it from the content.
Keep one primary action per card.

Examples

With action and footer

CardAction sits at the top right of the header. CardFooter holds the card's actions.

ApoB

Collected 12 Oct, after a 10 hour fast.

78 mg/dL

"use client"

import { Button } from "@workspace/ui/components/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@workspace/ui/components/card"

export function CardWithAction() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>ApoB</CardTitle>
        <CardDescription>Collected 12 Oct, after a 10 hour fast.</CardDescription>
        <CardAction>
          <Button variant="link" size="sm">
            History
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-2xl font-medium tabular-nums">
          78 <span className="text-sm text-muted-foreground">mg/dL</span>
        </p>
      </CardContent>
      <CardFooter className="gap-2 border-t">
        <Button size="sm">View report</Button>
        <Button size="sm" variant="outline">
          Share
        </Button>
      </CardFooter>
    </Card>
  )
}

Small

Set size="sm" for tighter padding in lists and dashboards.

Next draw

Thursday, 8:30 AM at home.

"use client"

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@workspace/ui/components/card"

export function CardSmall() {
  return (
    <Card size="sm" className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Next draw</CardTitle>
        <CardDescription>Thursday, 8:30 AM at home.</CardDescription>
      </CardHeader>
    </Card>
  )
}

Props

These are the props you set most often. Unlisted props pass through to the underlying element.

Prop	Type	Default	Description
`size`	`"default" or "sm"`	`default`	Inner spacing of the card.
`className`	`string`	—	Classes merged onto the element.