Product Carousel Hero
A hero with a swipeable product carousel beside a headline and CTA. Showcases a range of items or plans at the top of an ecommerce landing page.
A hero with a swipeable product carousel beside a headline and CTA. Showcases a range of items or plans at the top of an ecommerce landing page.
Search blocks by description or jump to a page.
Product Carousel Hero splits the viewport into two columns. The left column holds a small uppercase label, a large headline, a short paragraph, a vertical checklist of three feature points, a pair of CTA buttons, and a row of trusted company names. The right column shows a fixed aspect ratio image frame with three product slides stacked by opacity so each fades into the next. A name and short description overlay sits at the bottom of the image frame. Below the frame, dot indicators on the left jump to any slide, and prev/next arrow buttons on the right step through them in order.
The checklist items, CTA labels, company names, and each product slide are all independent copy. You can add or remove slides, rewrite the headline and subtext, swap the feature list, or drop the company row without affecting the rest of the layout.
Reach for this block when you need to introduce several distinct offerings at once without burying any of them below the fold. For a healthcare scheduling product this works well on a landing page that covers multiple care pathways, booking flows, or patient portal features, where a flat screenshot would only show one surface. The carousel gives each offering equal prominence while the checklist anchors the pitch in concrete benefits.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The natural fit is a product suite where each item deserves its own image and a one line description. A few other ways to fill the frame:
Tip: keep slides to three or four so the dot indicators stay readable and visitors reach the last slide without losing interest.