Search blocks by description or jump to a page.
A hero with framed product screenshots next to a headline and CTA. Shows the real interface at the top of a software or SaaS landing page.
With Product Screenshots opens with a centered text column: a small outline badge, a large headline, a subtext line, and two stacked action buttons that shift to a side-by-side row on wider screens. Below the text sits a full width main screenshot framed in a card with a heavy drop shadow, and two smaller screenshots float over its top right and left edges at slight angles, straightening on hover. Under the whole screenshot cluster a row of three icon-and-label feature callouts spans the width in a three column grid.
Every part is independent. The badge text, headline, subtext, and button labels are plain copy you can swap freely. The three floating or main images are separate, so you can replace each one without touching the others. The three feature callouts at the bottom are also independent items, and you can add, remove, or reorder them to match your actual selling points.
Reach for this block when you need visitors to see real screens of your product the moment they land. It suits a developer tools landing page particularly well because the main screenshot can show an IDE, a CLI dashboard, or a build pipeline view, while the two floating cards tease secondary panels like logs or config. Compared to a simple centered hero with a single image, this layout carries more visual weight and gives you three distinct frames to tell a layered interface story without scrolling.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The main use case is showing two or three screens from your own product, with the large frame holding the primary view and the floating cards hinting at supporting panels or secondary workflows. A few other ways to use the frame:
Tip: keep the floating cards cropped to a single focused UI region rather than a full screen dump so they read clearly at their smaller rendered size.