Skip to main content

CATALOG MODULE

The building blocks for a shelf, a menu, or a fleet

Five components (plus a stat-strip variant) for any site that lists a repeatable set of items — a rental shelf, a restaurant menu, an equipment fleet, a listings page. Demoed here with board-game-rental sample data; the components themselves carry no domain words.

← The module library

NOTHING MATCHES

Empty state

Shared by a filtered catalog grid's "nothing matches" state (and any future filtered surface): a heading, a body sentence, an optional reset control, and an optional escape-hatch link. Static — no client JS of its own; a filter runtime wires the reset button.

With both a reset button and an escape hatch

Nothing matches that combination.

Try widening the group size, or clear the filters and browse.

Ask us what to play

NOT STARS

Complexity / scale meter

A 1-N rating that isn't a quality judgment — stars mean that everywhere else on the web. Discrete filled/unfilled dots are purely decorative; a real aria-label ("Complexity 3 of 5 — moderate") carries the whole meaning for anyone not seeing the dots. Shown here on both a light and a dark surface — the concrete case preflight's badge/scale contrast gate exists to protect.

Light surface

Dark surface

ONE ITEM'S PRICE

Price block

One item's price model — not a list of many priced rows (that's the "Rate card" module). Every PriceModel kind: a per-term rate with a deposit, a flat rate, a "from" rate with a fee, a range with a minimum, and the honest "ask us" case with no number at all.

kind: "term"

$18.00 / night
$30.00 / weekend
+ $40.00 deposit

kind: "fixed"

$25.00

kind: "from"

from $15.00
Cleaning fee: $5.00

kind: "range"

$12.00 – $28.00
2-item minimum

kind: "quote"

Ask us

STATSTRIP, REUSED

Spec strip

<StatStrip variant="spec"> — same labelled-values-in-a-row shape as the everyday stat strip, but fed typed Spec[] instead of plain value/label pairs. A players count renders as a range, play time appends its unit, and complexity renders a ScaleMeter in the value slot instead of a bare number.

Game specs

  • 2–5

    Players

  • 45 min

    Play time

  • Complexity

AVAILABILITY + PRICE + CTA

Catalog panel

The item-detail page's availability card: a short status badge, the honest per-status sentence, the fixed response-time line, price (when the status policy allows showing one), a CTA, and — when present — the replacement-value disclosure and a rules link. Shown on both a light and a dark surface, the availability badge included, for the same reason as the scale meter above.

Light surface — available, with a price and a replacement-value disclosure

Dark surface — not stocked, no price shown

THE BOOKSHELF

Catalog grid + filters

<CatalogGrid> maps entries to <TileGrid> cards and stamps the data-* facet attributes below onto each one; <CatalogFilters> is the one <form> — shelves, facets, search, sort, reset, and "Surprise me" — whose ≤4KB runtime reads those exact attributes to filter and sort. This is a synthetic 7-item dataset, not real inventory, wired end to end: try the category radios, the tag chips, the players/time inputs, search, sort, and the random pick. With JavaScript disabled, "Apply filters" still submits a real GET request — the honest "no-JS degrades to the full unfiltered grid" answer the design spec calls for.

Category
Tags
Play time (min)

Demo shelf