Product grid (three-up)
Three product cards with image, name, price, and CTA. Simple product showcase.
product-grid/cards/default
Product grid templates
Ecommerce-style product showcases: three-up and four-up grids and a featured-product bento with supporting items.
8 variants · neutral wireframe · ready to reskin with your design tokens
Product grid (three-up)Featured product layoutProduct grid (four-up)Product list rowsProduct cards with badgesTwo featured productsCategory tilesCollection band
Featured product layout
One large featured product card spanning the grid, two smaller products beside it. Hero product with supporting items.
product-grid/cards/featured
Product grid (four-up)
Four compact product cards with image, name, and price. Dense product view.
product-grid/cards/four-up
Product list rows
Products as rows: small image, name, one-line description, price and view link under thin dividers.
product-grid/list/rows
Product cards with badges
Three cards with a status badge on the image (New, Bestseller), star rating line, price and CTA.
product-grid/cards/with-badges
Two featured products
Two large product presentations side by side with description, price and buy CTA. Hero treatment for a small catalog.
product-grid/featured/duo
Category tiles
Three category tiles with image, category name and item count, plus a view-all link. The shop entrance.
product-grid/cards/categories
Collection band
Muted band: collection pitch and link left, three mini product cards with prices right.
product-grid/band/collection
claude mcp add --transport http rifframe https://rifframe.app/api/mcp > "Add a product grid section to my landing page"
Your coding agent can search and pull these sections directly. How it works.