Scrolling Preview
A category preview that scrolls product cards in a continuous strip, ideal for showing many items while keeping a compact footprint on a collection page.
A category preview that scrolls product cards in a continuous strip, ideal for showing many items while keeping a compact footprint on a collection page.
Search blocks by description or jump to a page.
Scrolling Preview opens with a header row: a heading and subheading on the left, and a pair of arrow buttons on the right that let visitors page through the strip one viewport width at a time. Below that sits a horizontally scrollable row of cards that snap into place. Each card holds a 16:9 image with a soft gradient overlay, then a content area with a category name, a short description, a row of featured brand badges, a product count, and a ghost button that slides in on hover.
The heading, subheading, and every card are independent pieces. You can add or remove cards freely, swap the brand badge list for any short set of labels, and replace the product count with any secondary stat. The arrow buttons always scroll by one container width, so the layout works equally well with three cards or eight.
This layout suits a catalog landing page where you have several parallel collections and want to surface them without committing a tall column of stacked sections to each one. For an online education platform it works well as a "Browse by subject" strip, letting learners scan tracks like Design, Development, and Data Science in a compact band. It holds its own against the Grid Preview, which shows everything at once but runs taller; the scrolling strip keeps the fold clear for a headline or hero above it.
A natural flow around it on an Ecommerce page:
Before
After
Any set of parallel collections that each benefit from a cover image and a short supporting line. A few directions this frame handles well:
Tip: keep the badge row to three items per card so the content area stays a consistent height across all cards in the strip.