Grid Preview
A category preview arranging collections in an even grid of image tiles, giving a clean overview of every department on a busy ecommerce home page.
A category preview arranging collections in an even grid of image tiles, giving a clean overview of every department on a busy ecommerce home page.
Search blocks by description or jump to a page.
Grid Preview arranges product categories in an even responsive grid of image tiles. One tile spans two columns and two rows as a featured card, and the remaining tiles fill the grid at equal size. Each tile overlays a gradient across its image so the category name, a product count, and any status badges (Trending, New Arrival) remain legible. On hover the image scales gently, a subtle tint washes over the card, and an Explore button slides in from the left.
The section carries no heading or wrapper chrome, so it drops cleanly into any page column. Every tile is driven by a data array, meaning you can add or remove categories, change names and counts, and toggle the featured, trending, or new flags without touching the layout logic.
Reach for this block when you need a clean department map at the top of a homepage or a category landing page and want shoppers to see every section at once rather than scrolling through a carousel. For a fintech or banking product, the same grid pattern works well for surfacing account types, plan tiers, or service areas where equal visual weight matters. It outperforms a horizontal scroll when the number of categories is small enough to fit in one glance, and it outperforms a plain list when images carry the brand.
A natural flow around it on an Ecommerce page:
Before
After
The grid is a strong fit for any situation where a fixed set of categories needs equal real estate. A few ways to use it beyond a standard storefront:
Tip: keep the featured tile to one per grid so the asymmetric span reads as intentional; two large tiles compete and neither stands out.