Three Column Preview
A category preview laid out in three balanced columns of image tiles, sorting collections into clear groups for a wide ecommerce navigation page.
A category preview laid out in three balanced columns of image tiles, sorting collections into clear groups for a wide ecommerce navigation page.
Search blocks by description or jump to a page.
Three Column Preview is a full-width category grid. Three rounded image tiles sit in a row, each filling a 4:3 aspect ratio frame with a photo, a soft gradient overlay fading from the bottom, and a content layer anchored to the lower edge. That layer shows a category name, a one-line description, a product count, and a "Shop now" button that slides in and fades up only when the card is hovered.
The three tiles and their copy are fully independent. You can swap the category names, descriptions, product counts, and images without touching the layout. The grid collapses to two columns on tablet viewports and a single column on mobile, so the same markup works from small screens up to a full desktop canvas.
Reach for this block when you need to surface a small, curated set of top-level sections at a glance. It fits a workspace or dashboard storefront homepage where three clear groupings (tools, templates, integrations, for example) need equal visual weight. Because every tile is the same size, no category appears more important than another, which suits a project management context where teams browse by type rather than by trend.
A natural flow around it on an Ecommerce page:
Before
After
Three balanced image tiles work for any domain with a handful of clear divisions. A few ways to use the frame:
Tip: keep category names to two or three words so the heading sits on one line and the hover button has room to appear cleanly beside the count.