Card

A cream surface with a 2px navy pixel border and stepped corners. Same shadcn anatomy: Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter.

field notes

A warm pixel surface for studio notes and crafted product moments.

Cream paper, navy ink, stepped corners, and a hard offset shadow.

opendismiss

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

<Card>
  <CardHeader>
    <CardTitle>field notes</CardTitle>
    <CardDescription>A warm pixel surface.</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

Anatomy

Part	Role
Card	The bordered surface wrapper
CardHeader	Title + description stack
CardTitle	Uppercase mono heading
CardDescription	Muted supporting text
CardContent	Main body
CardFooter	Actions row