Steps With Mini Mockups

About this block

Steps With Mini Mockups opens with a centered heading and lede, then lays out three numbered step cards in a row. Each card leads with a small product mockup of that step, a brief form with fields and a submit button, a kanban board with a highlighted card, and a report chart with rising bars, followed by the step title, its number, and a short blurb. The mockups are pure markup built from rounded divs and theme tokens, so the block needs no images and inverts cleanly in dark mode. On small screens the cards stack into a single column.

The three steps live in one array holding a number, a title, a blurb, and a reference to the mockup component, so reordering or rewording a step is a one line change. The heading and lede are independent copy strings, and each mockup is a small local component you can swap for your own sketch of the product without touching the card layout.

When to use

Reach for this block when you want the how it works section to show the product, not just describe it. A marketing platform can preview the brief form, the campaign board, and the live report, so visitors see the actual surfaces they will work in at every step. It edges out Three Step Cards when icons feel too abstract for your product, and it edges out Split Steps With Mockup when each step deserves its own visual rather than one shared app window.

A natural flow around it on a Marketing Pro page:

Before

• Heroes to state the promise the three steps then make concrete
• Features to introduce the capabilities each step relies on

After

• Pricing once visitors can picture themselves inside the workflow
• FAQs to clear up setup and migration questions the steps may raise

What you can display

One strong use is the core campaign workflow, from brief to report. A few other ways to fill the three cards:

• An onboarding path. Show the connect screen, the import board, and the first dashboard to walk new teams through week one.
• A review process. Pair a submission form, an approval queue, and a publish confirmation to explain how work gets signed off.
• A reporting cadence. Use a data source form, a metric board, and a summary chart to show how raw numbers become a weekly readout.

Tip: keep each mockup to one clear idea with a single highlighted element, so the eye lands on the part of the product that step is actually about.