Molecules

IterationCard

A frame in a design-iteration gallery — artwork, version tag, and rationale.

Preview

components/content/IterationCard.jsx

Baseline toolbarEvery action exposed — too loud.

Grouped actionsGrouped by intent; hierarchy still flat.

Compact toolbarSecondary actions collapsed into an overflow menu.

Composes VersionBadge for the tag. Lay several in a grid to show the progression v1 → v3 — the current frame differentiates with the craft accent, never a new hue.

Usage

src/components/ui/IterationCard.tsx

tsx

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

<IterationCard
  label="Compact toolbar"
  version="v3"
  status="current"
  current
  note="Collapsed secondary actions into an overflow menu."
  art="/iterations/toolbar-v3.png"
/>

API

props

Prop	Type	Default	Description
label	string	—	Short name for this exploration.
version	string	—	Version tag (v1, v3.2) — rendered by the composed VersionBadge.
status	"current" \| "explored" \| "archived" \| null	null	Lifecycle dot on the version tag.
note	string	—	One-line rationale under the label — why this frame exists.
art	string	—	Artwork — image URL or CSS background.
ratio	string	"4 / 3"	Media aspect ratio.
current	boolean	false	Marks the chosen iteration with the craft-accent border.

Tokens consumed

semantic only

--signal-craft--color-bg-elevated--color-bg-panel--color-border--color-border-hover--radius-lg--transition-hover--ease-out-expo