Earthen Bottle
$48
Product Lists
Product grids and lists with images, ratings, color swatches, and CTAs.
How To Use This Page
Product Lists sits inside the Ecommerce part of the catalog and collects reusable examples that solve the same job in different ways.
This page currently groups 11 examples so you can compare structure, emphasis, and density before choosing an implementation direction.
How The Content Is Grouped
- The examples are grouped as a single Ecommerce reference page so you can compare variations without leaving the route.
- Use the jump links to move straight to the most relevant example once you know which structure, layout, or emphasis pattern you need.
Start With
Simple
A clean four-column product grid with name and price only.
With Border Grid
Banded grid cells with star ratings and review counts.
With Color Swatches
Swipeable cards on small screens with selectable color swatches.
With CTA Link
A wide product grid finished with a collection-level text link.
With Image Overlay & Add Button
Image-first cards with a gradient overlay and persistent purchase action.
With Inline Price
A minimal list layout with the product title and price aligned on one row.
With Supporting Text
Detailed product cards with a short line of context under each name.
With Tall Images
Portrait-oriented imagery that gives the collection a more editorial feel.
Variant 1
Simple
A clean four-column product grid with name and price only.
Nomad Tumbler
$35
Focus Paper Refill
$89
Machined Pencil
$32
Variant 2
With Border Grid
Banded grid cells with star ratings and review counts.
Earthen Bottle
★★★★★
(128)$48
Nomad Tumbler
★★★★★
(76)$35
Focus Paper Refill
★★★★★
(52)$89
Machined Pencil
★★★★★
(91)$32
Variant 3
With Color Swatches
Swipeable cards on small screens with selectable color swatches.
Earthen Bottle
Shown in Natural
$48
Nomad Tumbler
Shown in Stone
$35
Focus Paper Refill
Shown in Porcelain
$89
Machined Pencil
Shown in Night
$32
Variant 4
With CTA Link
A wide product grid finished with a collection-level text link.
Earthen Bottle
Clay-toned hydration with a grippy finish built for daily carry.
$48
Nomad Tumbler
Double-wall insulation sized for your commute and your desk.
$35
Focus Paper Refill
Grid, blank, and ruled sheets for planning sessions that stick.
$89
Variant 5
Earthen Bottle
$48
Nomad Tumbler
$35
Focus Paper Refill
$89
Machined Pencil
$32
Variant 6
With Inline Price
A minimal list layout with the product title and price aligned on one row.
Earthen Bottle
$48
Nomad Tumbler
$35
Focus Paper Refill
$89
Machined Pencil
$32
Ceramic Mug
$28
Zip Tote Basket
$140
Variant 7
With Supporting Text
Detailed product cards with a short line of context under each name.
Earthen Bottle
$48
Clay-toned hydration with a grippy finish built for daily carry.
Nomad Tumbler
$35
Double-wall insulation sized for your commute and your desk.
Focus Paper Refill
$89
Grid, blank, and ruled sheets for planning sessions that stick.
Variant 8
With Tall Images
Portrait-oriented imagery that gives the collection a more editorial feel.
Earthen Bottle
$48
Nomad Tumbler
$35
Focus Paper Refill
$89
Machined Pencil
$32
Variant 9
Card With Full Details
Structured cards with options, price, and richer product metadata.
Earthen Bottle
Black · Natural
$48
Clay-toned hydration with a grippy finish built for daily carry.
Nomad Tumbler
Black · Natural
$35
Double-wall insulation sized for your commute and your desk.
Focus Paper Refill
Black · Natural
$89
Grid, blank, and ruled sheets for planning sessions that stick.
Machined Pencil
Black · Natural
$32
A weighted aluminum body with a precise twist-feed mechanism.
Variant 10
With Inline Price And CTA Link
A compact list that pairs inline pricing with a text action.
Earthen Bottle
$48
Nomad Tumbler
$35
Focus Paper Refill
$89
Machined Pencil
$32
Ceramic Mug
$28
Zip Tote Basket
$140