Grids, filter rails, galleries, variant pickers and buy boxes.
A listing page is a filtering problem and a detail page is a persuasion problem, so they are different components with different failure modes. These cover the grid with its facet rail — including the count of what the filter removed — and the detail layout with a gallery, variant selection and a buy box that stays reachable while you scroll the description.
Three products side by side with the row labels pinned through a horizontal scroll, an "only show differences" toggle that says how many rows it hid, and "best" marked only where better means something.
Results on one side, a drawn map on the other, scrolling independently. The map is explicitly decorative and out of the tab order — the list is the content, not its companion.
"In stock" on a listing that means "one of nine variants is in stock" is the single most expensive lie in commerce UI — it is discovered at checkout, and the basket is abandoned there.
A grid of forty products with a one-line title is a search result. For anything considered, the reason the collection exists is what does the selling, and it belongs above the grid rather than on a linked story page nobody opens.
One factory, namedPorto, family-run, thirty years. The address is on the about page rather than implied by a photograph.
Repairs, not warrantiesSend it back at any age. Repair is charged at cost and typically beats replacing it.
Deadstock and offcutsWhich is why sizes run out and do not come back. The stock list says which.
Priced onceNo seasonal markdown, so nobody who bought in March is punished for it in July.
Crème fraîche. The honey is from the roof of the building next door.
Quince, brown sugar, oat cream(ve) (df)
9
Poached slowly until it goes the colour of a penny.
Salted caramel and malt ice cream(v) (gf)
5 / 8 / 10
One scoop, two scoops, or three if the table is sharing.
(gf)
Gluten free
(s)
Contains shellfish
(v)
Vegetarian
(n)
Contains nuts
(ve)
Vegan
(df)
Dairy free
Please tell us about allergies before you order — we cook in one kitchen and cannot promise any dish is free of a trace. A discretionary 12.5% service charge is added to tables of six or more and goes to the people who served you.
A restaurant menu typeset as a bill of fare rather than a product grid — dotted leaders to the price, dietary marks as abbreviations with a key, and prices as strings so “market price” still fits.
A midweight crew neck knitted from extra-fine merino, with a clean set-in sleeve and ribbed trims that hold their shape through a season of wear.
Cut slightly relaxed through the body so it layers over a shirt without pulling. Fully fashioned, which means the panels are knitted to shape rather than cut from a sheet — it costs more to make and it does not lose its line at the shoulder.
Materials & care
Knitted in Scotland from mulesing-free merino.
Composition
100% extra-fine merino wool
Weight
19.5 micron, 12gg
Care
Hand wash cold, dry flat
Origin
Made in Scotland
Delivery
Standard delivery is free on orders over £50 and arrives in 2–4 working days. Next-day is £6.95 if you order before 2pm.
Standard
2–4 working days · free over £50
Next day
Order before 2pm · £6.95
International
5–10 working days · from £12
Returns
Thirty days from delivery, free, in any condition you would accept yourself. Print the label from your order page or hand it to any collection point.
Sale items included — we have never understood shops that exclude them.
The panel that decides whether the parcel comes back: what the model is wearing and what previous buyers did, above a table whose inches are converted rather than maintained twice.
A forty-row spec table is a place to hide the three figures someone is actually comparing. These are pulled out; the full table is still below for the person who wants it.
Weight1.24 kg with the battery, which is the only way anyone carries it.
Battery18 hours of mixed use, measured at 150 nits rather than at minimum brightness.
PortsTwo USB-C, one HDMI, one headphone. No dongle in the box and none needed.
RepairabilityBattery and SSD are user-replaceable. Parts and the manual are public.
In a bottom sheet with an apply button, not a collapsed accordion above the results. Applying filters one at a time on a phone means a full result reload per tap.
What does a variant picker need to get right?
Unavailable combinations have to be visibly unavailable rather than silently failing on add-to-cart, and the price and image must update with the selection. Both are wired through props here.
Are these product listing and detail pages free to use?
All 16 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add product-grid` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.