Quote With Product Shot
A large quote and attribution beside a launch checklist mockup of the product.
A large quote and attribution beside a launch checklist mockup of the product.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Quote With Product Shot is a two-column section that pairs a customer testimonial with an SVG product mockup. The left column holds a large blockquote followed by an avatar, name, and role in a figcaption row. The right column shows a card-style launch board interface: a title bar with three window dots, an "On track" status badge, and a scrolling list of tasks where each row carries a task name, an owner tag, and a filled or empty completion indicator.
The quote and the mockup are independent. You can swap the testimonial copy and attribution without touching the product panel, and you can extend or shorten the task list inside the mockup to match what your product actually shows. The two columns collapse to a single stack on narrow viewports.
Reach for this block on a marketing or product landing page where you want a testimonial to do more than float in isolation. The product mockup anchors the quote to a concrete feature, which works well for ecommerce brands and launch tools where showing the workflow alongside the praise makes the claim feel earned. Compared to a plain centered quote, the two-column frame earns more visual weight without needing a hero-sized section.
A natural flow around it on a Marketing Pro page:
Before
After
The natural fit is a customer quote tied to a specific feature your product delivers. A few other ways to use the frame:
Tip: keep the task list to four or five rows so the mockup card stays compact and the quote and the panel read as equals in the two-column layout.