ecommerce pattern
Product list
Storefront catalog — grid of products with filters and sort.
When to use it
User browses a category. Default landing for /shop / /category/X.
- Time-to-product-detail <5s
- Filters reduce by ≥1 dim in <10s
- No layout shift on filter change
Layout regions
- header
- filters
- Left rail with collapsible groups
- main
- toolbar
- Sort + count
- grid
- Product cards
- pagination
- Or infinite scroll
States
- default
- Products visible
- loading
- Filter changed
- empty
- No products in category
- partial
- No results match filter
Example
<Container variant="xl"><Grid variant="asymmetric" cols="240px 1fr"><FilterSidebar /><Stack><Toolbar /><Grid variant="auto" min="240px">{products.map((p) => <ProductCard key={p.id} {...p} />)}</Grid><Pagination /></Stack></Grid></Container>The full Product list pattern specifies 3 exact microcopy strings, 2 motion specs, 5 composition rules — all gated behind the full recipe. Get the full recipe.