9 Product Listings Blocks

Product Card Grid

Responsive product cards with sale badges, ratings and a wishlist button layered above the card link so it stays clickable.

Product Listings142 lines1 dep11 Sept

Faceted Filter Sidebar

Category, size, colour and price facets as proper fieldsets, with colour swatches that carry their name as well as their hue.

Product Listings220 lines1 dep2 Sept

Collection Sort Toolbar

Result count, sort and density switch — with the count in an aria-live region, since it is the only feedback a filter change gives some users.

Product Listings131 lines1 dep2 Sept

Scroll-Snap Product Rail

A "you might also like" row on native scroll-snap — touch swiping, momentum and keyboard support for free, with no carousel library.

Product Listings118 linesNo deps

Comparing 3 of 3

Only show differences

2 rows are identical across all 3 and hidden.

Specifications compared across 3 products. 2 identical rows are hidden.
Specification	Field Over-Ear£249	Field Over-Ear Lite£179	Studio Reference£329
Price	£249	£179best	£329
Battery life	38 hours	44 hoursbest	30 hours
Weight	286 g	241 gbest	324 g
Noise cancelling	Adaptive, 3 levels	Passive only	Adaptive, 5 levels
Driver	40 mm dynamic	40 mm dynamic	50 mm planar
Water resistance	IPX4	IPX4	None
Warranty	2 years	2 years	5 yearsbest

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.

Product Listings341 lines1 dep13 Sept

What is actually available

"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.

Stock Availability List

Availability per variant stated before the cart, because discovering it at checkout is where the basket gets abandoned.

Product Listings149 linesNo deps10 Sept

The collection

Made to be repaired, not replaced

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.

Collection Story Split

The editorial header above a collection grid, carrying the four facts that decide a considered purchase.

Product Listings157 linesNo deps13 Sept

Homes for sale in Bristol

142 properties · sorted by newest listed

Map and Results Split

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.

Product Listings329 lines1 dep

Dinner

Served Wednesday to Sunday, 6pm until 10pm. One kitchen, one menu, changed when the produce changes rather than on a schedule.

To begin

Served until 3pm

Devilled eggs, brown crab, lovage(gf) (s)
9
Six halves. The crab is picked here on the morning it arrives.
Bread and cultured butter(v)
5
Sourdough from the Tuesday bake, salted butter churned in house.
Chicory, pear, hazelnut, aged ewe’s cheese(v) (gf) (n)
11
Bitter, sweet, salt. The pears are from a single orchard in Herefordshire.
Potted shrimp on toast(s)
12
Morecambe Bay brown shrimp, mace and cayenne, clarified butter.

Larger

Hogget shoulder for two, anchovy and rosemary(gf)
58
Four hours in the wood oven, carved at the table. Comes with greens and dripping potatoes.
Whole plaice, brown butter, capers, sea beet(gf)
28
On the bone. Ask and we will take it off for you.
Barley, wild mushroom, pickled walnut, curd(v) (n)
21
The mushrooms change weekly; ask what came in.
Dry-aged rib chop, bone marrow butter(gf)
market price
Thirty-five days. Priced by weight on the day.

To finish

Or a cheese plate, £4 a cut, £14 for four

Burnt honey and thyme tart(v)
10
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.

Menu Course List

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.

Product Listings282 linesNo deps

Product Listings

Merino Crew Sweater

Selvedge Denim Jacket

Cotton Oxford Shirt

Waxed Canvas Holdall

Ribbed Wool Beanie

Leather Card Holder

Product Card Grid

Faceted Filter Sidebar

Collection Sort Toolbar

You might also like

Scroll-Snap Product Rail

Comparing 3 of 3

Product Comparison Table

What is actually available

Stock Availability List

Made to be repaired, not replaced

Collection Story Split

Homes for sale in Bristol

Map and Results Split

Dinner

To begin

Devilled eggs, brown crab, lovage(gf) (s)

Bread and cultured butter(v)

Chicory, pear, hazelnut, aged ewe’s cheese(v) (gf) (n)

Potted shrimp on toast(s)

Larger

Hogget shoulder for two, anchovy and rosemary(gf)

Whole plaice, brown butter, capers, sea beet(gf)

Barley, wild mushroom, pickled walnut, curd(v) (n)

Dry-aged rib chop, bone marrow butter(gf)

To finish

Burnt honey and thyme tart(v)

Quince, brown sugar, oat cream(ve) (df)

Salted caramel and malt ice cream(v) (gf)

Menu Course List