Compact List
A dense list packing each product into a slim row with thumbnail, name, and price. Fits long catalogs and search results where space is tight.
A dense list packing each product into a slim row with thumbnail, name, and price. Fits long catalogs and search results where space is tight.
Search blocks by description or jump to a page.
Compact List arranges products in a vertical stack of slim rows. Each row holds a square thumbnail on the left, then a three-column information rail: product name with a star rating and review count, a price column showing both the current price and a struck-through original price, and an action column with an "Add to Cart" button and a wishlist icon button. Hovering a row shifts its background to signal interactivity.
The list renders six items by default. The thumbnail, name, rating copy, price pair, and button label are all independent, so you can adjust any of them without touching the row structure. Items can be added or removed freely, and the action column collapses gracefully on narrow screens.
Reach for this block when vertical space is limited but the catalog is long. It suits a course library page on an online education platform where learners need to scan dozens of titles, ratings, and prices quickly before clicking through. It works better than a grid layout when the items differ only in name and price and a large image adds no extra value, and better than a table when you want a softer, card-like feel rather than a rigid data grid.
A natural flow around it on an Ecommerce page:
Before
After
One row holds everything a shopper needs to act, so the frame works for more than physical goods:
Tip: keep the product name short enough to fit on one line at typical viewport widths; long titles truncate and the rating row shifts up.