Design System
Blocks · Ecommerce
Storefront blocks — product lists, category grids, product details, cart, checkout — composed from the kit over mock fixtures.
A responsive product grid of image/rating/price/add-to-cart tiles.
All products
6 itemsA single product tile — image, rating, name, price, add-to-cart.
A horizontal product row list — thumbnail, detail, price, add.
A category page header — breadcrumb, title, and filter chips.
A product detail — blueprints with thumbnails beside title, price, options.
A compact quick-view card — image beside a short buy panel.
A cart panel — line items with a subtotal/shipping/total ledger.
Your cart
A two-column checkout — address/delivery form beside an order summary.
A storefront filter rail — category and availability checkboxes.
A review summary — average score beside a per-star distribution.
A promotional collection banner — copy beside a two-up product frame.
The warm-weather collection
Linens, ceramics, and everything for the long evenings — up to 20% off through July.
Shop the editA storefront header — brand, category nav, search, and a cart badge.
A shop-by-category grid of square icon tiles.
A featured-product banner — copy and price beside a product frame.
Aurora Desk Lamp
Warm-dim brass, weighted for a fingertip tilt — the desk lamp we reach for every evening.
An on-sale strip — a titled row of discounted product tiles.
On sale now
Ends Sunday
A slide-over cart drawer — line items with a subtotal and checkout.
An empty-cart state — icon, reassuring copy, and a shop CTA.
Your cart is empty
Browse the collection and add something you love.
An order thank-you — success mark, order line items, and a total.
Thank you for your order
Order #4021 · a receipt is on its way to your inbox.
A past-orders table — order, date, items, status badge, and total.
Order history
| Order | Date | Items | Status | Total |
|---|---|---|---|---|
| #4021 | Jul 21 | 3 | Shipped | $254 |
| #4019 | Jul 18 | 1 | Delivered | $96 |
| #4015 | Jul 12 | 4 | Processing | $412 |
| #4008 | Jul 3 | 1 | Delivered | $54 |
A card payment form — number, expiry, CVC, and name fields.
Payment
🔒 Encrypted — we never store card details.
A shipping address form — name, street, city/ZIP, default toggle.
A striped product specification table — attribute and value rows.
Specifications
A four-up trust strip — shipping, returns, security, and warranty.
A storefront hero — seasonal copy beside a four-up product mosaic.
Objects made to last
Warm brass, stonewashed linen, hand-thrown ceramics — the everyday, done properly.
A dense four-column product grid of image, name, and price.
A horizontally-scrolling trending-products carousel with arrows.
Trending now
A product detail tab bar — description, specifications, and reviews.
A warm-dim desk lamp in solid brass, weighted for a fingertip tilt. The braided cord and machined dimmer are built to be repaired, not replaced — the kind of object that outlasts the desk it sits on.
A full-page cart — line items with quantity steppers and a summary rail.
A horizontal checkout progress stepper — cart, shipping, payment, review.
- ✓Cart
- ✓Shipping
- 3Payment
- 4Review
A saved-items grid of product cards with a remove-heart and add-to-cart.
Saved items
A catalog toolbar — result count, category chips, and a sort control.
A promo-code card — apply field and an applied-discount confirmation.
Have a promo code?
A compact six-up recently-viewed product thumbnail row.