Split With Mockup

About this block

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.

When to use

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

• Features to introduce the core capabilities before showing the numbers in context
• Testimonials to build trust before the conversion ask

After

• Pricing to give readers a clear next step once the mockup has done its job
• FAQs to handle objections immediately after the call to action

What you can display

The mockup column works as a lightweight proof surface alongside your conversion copy. A few ways to fill it:

• Live performance numbers. Swap the spend, pipeline, and return figures for your own key metrics so the dashboard instantly mirrors your product's value proposition.
• Active campaign or project list. Replace the campaign row labels with real workflow names so the mockup reads as a genuine product preview rather than a placeholder.
• Conversion-focused CTAs. The two-button row supports a primary action and a softer option like a demo request, which suits an ecommerce brand directing buyers toward a free trial or a live walkthrough.

Tip: keep the metric values short (under six characters) so the three stat cards stay balanced and the numbers read at a glance.