Steps With Mini Mockups
Three numbered step cards, each led by a mini UI mockup of the brief, board, and report stages.
Three numbered step cards, each led by a mini UI mockup of the brief, board, and report stages.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is the core campaign workflow, from brief to report. A few other ways to fill the three cards:
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.