Grid List
A responsive grid of product cards with images, titles, prices, and buttons. The standard catalog layout for category and search pages in a store.
A responsive grid of product cards with images, titles, prices, and buttons. The standard catalog layout for category and search pages in a store.
Search blocks by description or jump to a page.
Grid List is a standard catalog layout. Eight product cards sit in a responsive grid that collapses from four columns on wide screens down to one on mobile. Each card has a square product image that scales up on hover, a wishlist button that fades in at the top right corner on hover, a truncated product name, a star rating with review count, a current price alongside a struck-through original price, and two action buttons side by side: "Buy Now" and "Add to Cart."
The card count, product names, prices, and rating values are all independent copy. You can swap the image, adjust how many cards render, and remove either action button without affecting the rest of the layout. The wishlist button is a standalone icon button and can be dropped if your store does not have a saved items feature.
Reach for this block when you need a browse-first catalog page where shoppers scan many listings at once before narrowing down. It fits a real estate marketplace well, for example a "Browse Properties" page where each card shows a listing photo, address, price, and quick-action buttons. It outperforms the Compact List when images carry the decision and outperforms the Featured List when no single item deserves a full spotlight.
A natural flow around it on an Ecommerce page:
Before
After
The most direct use is a category or search results page where every card maps to a real listing. A few other ways to use the frame:
Tip: keep product names short enough to stay on one line inside the card so the truncation never hides meaningful detail from browsers.