Component

Card

Content container with optional media, eyebrow, title, text and footer. Use composed props for catalogue cards, or pass free children.

Card.jsx Card.d.ts Card.prompt.md Open raw preview HTML

Live demo

Rendered with the actual component source, not a re-implementation.

Seating

The Ajao Bench

Hand-jointed iroko, finished in raw linseed oil.

Usage

import { Card } from "./Card.jsx";

<Card
  interactive
  media={<img src="bench.jpg" alt="" />}
  eyebrow="Seating"
  title="The Ajao Bench"
  text="Hand-jointed iroko, finished in raw linseed."
  footer={<Button size="sm">View piece</Button>}
/>

Props

Card props — see the source .d.ts for the complete type.
Prop	Type	Default	Description
`elevation`	`"flat" \| "raised"`	`"raised"`	Elevation style.
`interactive`	`boolean`	`false`	Lift + shadow on hover; renders as a clickable surface.
`media`	`ReactNode`	—	Media node rendered in a 3:2 frame at the top.
`eyebrow`	`ReactNode`	—	Small uppercase label above the title.
`title`	`ReactNode`	—	Card title, rendered in the display serif.
`text`	`ReactNode`	—	Supporting body text.
`footer`	`ReactNode`	—	Footer node (actions, meta) pinned to the bottom.