Card

A plain container — the shell behind every composed surface. Use it directly for simple groupings; compose it for product cards, brand cards, and empty states.

Resolute Denim#

Single-person workshop in Vancouver. Heavy Japanese selvedge denim, made to order.

Usage#

Cards are containers, not accents. Don't use a card to draw a box around a single sentence. Group related content.
Interactive cards lift on hover. The 1 px translate + shadow-hover pattern is reserved for cards you can actually click.
Padding scales with importance. sm for inline surfaces, md default, lg for hero or feature blocks.

Props#

Name	Type	Default	Description
interactive	boolean	false	Adds hover elevation and cursor treatment.
padding	"none" \| "sm" \| "md" \| "lg"	"md"	Internal padding scale.

Code#

tsx

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

<Card>
<h4>Resolute Denim</h4>
<p>Single-person workshop in Vancouver.</div>
</Card>

<Card interactive padding="lg">
...
</Card>