Card

A container surface. Presentational Astro component — renders server-side with zero client JS. Three variants: light (bright workspace, default), dark (ink surface), and patch (the workwear-patch corner, reserved for the brand metaphor).

Live

Light

Default workspace card on paper.

Patch

Asymmetric corner — brand moment only.

Dark

Ink surface for the cockpit frame.

Usage

---
import Card from '@repo/ui/Card';
---
<Card title="Order summary">…</Card>
<Card variant="patch" title="Featured">…</Card>
<Card variant="dark" noPadding>…</Card>

Props

Prop	Type	Default	Notes
variant	light | dark | patch	light	patch = 8px 8px 8px 0 corner + heavy border + cast shadow
title	string	—	Optional header with divider
noPadding	boolean	false	Drop the body padding (for tables, media)
class / titleClass / contentClass	string	—	Style hooks

Do / don’t

• Do use light for almost everything; dark for the cockpit frame; patch rarely.
• Don’t use the patch corner on generic cards — it’s the patch metaphor, not decoration.
• Don’t stack shadows or add inner shadows / blur.