Split With Mockup
Card split pairing CTA copy and buttons with a metrics dashboard mockup.
Card split pairing CTA copy and buttons with a metrics dashboard mockup.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Split With Mockup is a two-column card layout. The left column holds a headline, a short supporting paragraph, and two action buttons stacked side by side. The right column fills with an inline app window mockup: a browser chrome strip at the top, then a three-stat metric grid showing spend, pipeline, and return figures, and below that a list of campaign rows each with a dot indicator, a label, and a proportional progress bar.
The headline, paragraph, and button labels are all independent copy changes. The three metric cards and the campaign rows can each be relabelled or reordered without affecting the other column. If your product does not track campaigns you can swap the row labels to whatever list makes sense for your context.
Reach for this block on a product marketing page or pricing section where a screenshot alone would feel flat. The side-by-side card shape works well partway down a long-form ecommerce storefront or brand page, after you have introduced the product and want to show a slice of the actual tool before asking someone to sign up. Compared to a plain text CTA like Minimal Inline, the mockup column gives visitors a concrete feel for the dashboard so the buttons carry more weight.
A natural flow around it on a Marketing Pro page:
Before
After
The mockup column works as a lightweight proof surface alongside your conversion copy. A few ways to fill it:
Tip: keep the metric values short (under six characters) so the three stat cards stay balanced and the numbers read at a glance.