Regions

Card – wraps the entire surface with border and background tokens.

CardHeader – vertical stack for title area (default padding `p-6`).

CardContent – main body content (`p-6 pt-0`).

CardFooter – horizontal flex row for actions (`p-6 pt-0`).

Campaign summary

Top-level stats from the last 7 days.

128 successful remixes

18 new collaborators

Examples

Pricing card

Studio

Unlimited remix seats and shared libraries.

• 5 collaborators included

• Priority support

• Custom branding

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

export function PlanCard() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Studio</CardTitle>
        <CardDescription>Unlimited remix seats and shared libraries.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-2 text-sm text-neutral-strong">
        <p>• 5 collaborators included</p>
        <p>• Priority support</p>
        <p>• Custom branding</p>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Upgrade</Button>
      </CardFooter>
    </Card>
  )
}

Grid layout

<div className="grid gap-4 md:grid-cols-3">
  {projects.map((project) => (
    <Card key={project.id} className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <CardTitle>{project.name}</CardTitle>
        <CardDescription>{project.description}</CardDescription>
      </CardHeader>
      <CardContent className="space-y-1 text-sm text-neutral-strong">
        <p>{project.images} images</p>
        <p>{project.members} collaborators</p>
      </CardContent>
      <CardFooter className="justify-between">
        <Button size="sm" variant="outline">Open</Button>
        <Button size="sm">Share</Button>
      </CardFooter>
    </Card>
  ))}
</div>

Props

Prop	Type	Default	Description
`className`	`string`	—	Extend layout or adjust spacing using Tailwind utilities.
`...rest`	`React.HTMLAttributes<HTMLDivElement>`	—	All div attributes (id, aria-, data-) are forwarded to the relevant region component.

Accessibility & guidelines

Structure

Use semantic headings (`CardTitle` as `<div>` + `role="heading"` if needed) to preserve hierarchy.
Maintain consistent padding—avoid stacking buttons without `CardFooter` to keep spacing predictable.
Wrap interactive content in `CardContent` or `CardFooter` to preserve focus outlines.

Design guidance

Use cards for grouped content on dashboards or landing summaries.
Limit to one primary action in `CardFooter`; secondary actions use `variant="outline"`.
Combine with `Badge` or `Tooltip` for status indicators.