Split Steps With Mockup

About this block

Split Steps With Mockup divides the section into two columns. The left column opens with a heading and a short supporting sentence, then stacks three numbered steps below it. Each step pairs a small tinted badge carrying the step number with a bold title and one or two lines of description. The right column holds an app window mockup: a title bar with three muted window dots, a row of three metric cards (Sessions, Pipeline, ROAS), a bar chart below them, and a live campaign status row at the bottom.

The two columns are independent. You can rewrite the heading, subheading, and all three step titles and descriptions without touching the mockup. The mockup itself is a self-contained SVG component, so you can swap it for a different dashboard illustration while the step list stays in place. Three steps is the natural fit, but you can add or remove steps from the list freely.

When to use

Reach for this block on a product marketing page for a project management workspace or a similar multi-tool platform where the main value is simplifying a fragmented workflow. The split layout lets the mockup do heavy lifting while the numbered steps give the process a clear sequence, which makes it stronger than a plain three-column card row when you want visitors to read left to right and arrive at the dashboard as the payoff.

A natural flow around it on a Marketing Pro page:

Before

• A hero section that names the problem the product solves, so visitors arrive at the steps already oriented
• A feature section that highlights individual capabilities before the steps show how they fit together

After

• Testimonials from teams that completed the same workflow, reinforcing the numbered steps with real outcomes
• A CTA to start a trial or book a demo once the process has been explained

What you can display

The clearest fit is a three-step onboarding or activation flow paired with a live product view. A few other ways to use the frame:

• A consolidation story. Show how disconnected inputs (data sources, integrations, team tools) collapse into one place, with the mockup displaying the unified result.
• A reporting workflow. Walk through how data gets collected, processed, and surfaced, with metric cards in the mockup previewing the output each step produces.
• A launch sequence. Describe the stages a campaign or project moves through, and let the status row in the mockup reflect the live state at the end of the process.

Tip: keep each step description to one or two short sentences so the left column stays visually balanced with the mockup beside it.