Product lists

Responsive product grids: simple inline-price cards, header + CTA link, and full-detail bordered cards.

Preview

Customers also purchased

Front of men's Basic Tee in black.

$35

Front of men's Basic Tee in white.

Aspen Tee

Aspen White

$35

Front of men's Basic Tee in dark gray.

$35

Front of men's Artwork Tee in peach with isometric cube.

Artwork Tee

Iso Dots

$35

Trending products

Hand stitched, orange leather long wallet.

Leather Long Wallet

Natural

$75

12-sided, machined black pencil and pen.

Machined Pencil and Pen Set

Black

$70

Set of three light and dark brown mini sketch books.

Mini-Sketchbooks

Light Brown

$27

Walnut organizer set with white compartments.

Organizer Set

Walnut

$149

Shop the collection

Products

Eight shirts arranged on table.

Basic Tee 8-Pack

Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.

8 colors

$256

Front of plain black t-shirt.

Basic Tee

Look like a visionary CEO and wear the same black t-shirt every day.

Black

$32

Front of plain white t-shirt.

Kinda White Basic Tee

It's probably, like, 5000 Kelvin instead of 6000 K.

White

$32

React preview

LiveView (HEEx) 

alias DesignSystem.UI.ProductLists

<ProductLists.product_list
  variant={:simple}
  heading="Customers also purchased"
  products={[
    %{
      name: "Basic Tee",
      href: "/products/basic-tee",
      color: "Black",
      price: "$35",
      image_url: "/images/tee-black.jpg",
      image_alt: "Front of men's Basic Tee in black."
    }
  ]}
/>

<ProductLists.product_list
  variant={:cta_link}
  heading="Trending products"
  cta_label="Shop the collection"
  cta_href="/collection"
  products={products}
/>

<ProductLists.product_list
  variant={:full_details}
  heading="Products"
  heading_sr_only={true}
  products={products}
/>

React (JSX) 

import { ProductList } from "../ui/index.mjs"

<ProductList
  variant="simple"
  heading="Customers also purchased"
  products={[
    {
      name: "Basic Tee",
      href: "/products/basic-tee",
      color: "Black",
      price: "$35",
      imageUrl: "/images/tee-black.jpg",
      imageAlt: "Front of men's Basic Tee in black.",
    },
  ]}
/>

<ProductList
  variant="cta_link"
  heading="Trending products"
  ctaLabel="Shop the collection"
  ctaHref="/collection"
  products={products}
/>

<ProductList
  variant="full_details"
  heading="Products"
  headingSrOnly
  products={products}
/>