Composite
Reorder row
A dense, re-buyable line item for reorder surfaces — the account "Buy Again" view, a cart reorder nudge, a "recently ordered" strip. Stacks into a .reorder-list. Each row carries the SKU, name, badges, fit note, a cadence hint ("bought 4× · ~every 6 wks · due now"), price, and per-row qty + add + save. Pairs .qty-stepper, .pill, .stock-badge, and .btn.
Reorder list
Rows stack with hairline dividers. The --due modifier flags items the buyer is due to reorder (amber wash + amber cadence hint).
<div class="reorder-list">
<div class="reorder-row reorder-row--due">
<div class="reorder-row__img"><svg>…</svg></div>
<div>
<div class="reorder-row__sku">SKU · FLTR-HP-18</div>
<a href="#" class="reorder-row__name">Pleated HEPA filter, pack of 4</a>
<div class="reorder-row__badges">
<span class="pill pill-brand">OEM</span>
<span class="stock-badge stock-low">LOW STOCK · 9</span>
</div>
<div class="reorder-row__compat">Fits: Tennant T500e</div>
<div class="reorder-row__freq reorder-row__freq--due">
<svg>…</svg> Bought <strong>6×</strong> · ~every 5 wks · <strong>Due now</strong>
</div>
</div>
<div class="reorder-row__price">$67<small>qty 6+ $60</small></div>
<div class="reorder-row__actions">
<div class="qty-stepper">…</div>
<button class="btn btn-brand btn-sm">Add</button>
<button class="reorder-row__save"><svg>…</svg></button>
</div>
</div>
</div>Anatomy
Four slots in source order: image, an info wrapper, price, actions. The info wrapper is a plain <div> holding the text elements below.
| Slot | Class | Required | Notes |
|---|---|---|---|
| List | .reorder-list | Yes | Flex column wrapper; give it a border + radius to frame the rows |
| Row | .reorder-row | Yes | 4-column grid (img / info / price / actions); add --due to flag reorder-due items |
| Image | .reorder-row__img | Yes | 52×52 thumb / icon |
| SKU | .reorder-row__sku | No | Muted micro-label (SKU · MPN) |
| Name | .reorder-row__name | Yes | Link to the PDP |
| Badges | .reorder-row__badges | No | Holds .pill + .stock-badge |
| Fit note | .reorder-row__compat | No | "Fits: …" compatibility line |
| Cadence | .reorder-row__freq | No | The personalization atom; add --due for amber "Due now" emphasis |
| Price | .reorder-row__price | Yes | Tabular; optional <small> sub-line (tier / auto-ship) |
| Actions | .reorder-row__actions | Yes | Qty stepper + Add button + .reorder-row__save |
Tokens consumed
| Slot | Token |
|---|---|
| Row padding | --caster-spacing-4 / --caster-spacing-5 |
| Divider | --caster-color-border-subtle |
| Hover wash | --caster-color-surface-subtle |
| Due wash | --caster-color-feedback-warning-surface |
| Due cadence text | --caster-color-amber-700 |
| Image background | --caster-color-surface-muted |
The cadence hint is the point.
.reorder-row__freq ("bought 4× · ~every 6 wks · due now") is what turns an order-history list into a personalized reorder surface. Derive it from inter-purchase intervals; use --due only when the item is actually due, or the urgency reads as theater.