Components

Card

Surface container with the hairline-border hover treatment and four surfaces.

Preview

components/core/Card.jsx

Elevated

Default card surface.

Panel

Recessed, lifts on hover.

Contrast

Opposite tone.

Bare

Border appears on hover.

Usage

src/components/ui/Card.tsx

tsx

import { Card } from "@/components/ui/Card";

<Card surface="panel" lift>
  <h3>Annotation Builder</h3>
  <p>AI tool for enriching free text data.</p>
</Card>

{/* A white diagram card on a dark page: */}
<Card surface="contrast" hoverable={false}>…</Card>

API

props

Prop	Type	Default	Description
surface	"elevated" \| "panel" \| "contrast" \| "bare"	"elevated"	elevated/panel adapt to the active theme; contrast paints the opposite tone (--surface-contrast); bare is transparent until hover.
hoverable	boolean	true	Brighten the hairline border on hover.
lift	boolean	false	Translate up 2px on hover (panel surfaces lift by default).
padding	string	"1.5rem"	CSS padding shorthand.
radius	string	"16px"	Corner radius — cards live at 12–18px.

Tokens consumed

semantic only

--color-bg-elevated--color-bg-panel--surface-contrast--on-contrast--color-border--color-border-hover--color-border-glass--shadow-card-hover--shadow-float