Zigzag Steps
Alternating rows of step copy and app mockups, each tagged with a bordered step badge.
Alternating rows of step copy and app mockups, each tagged with a bordered step badge.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Zigzag Steps opens with a left-aligned heading and a one-line subhead, then stacks three full-width rows below. Each row is a two-column grid: one side holds the step copy and the other holds an SVG app mockup. The copy side carries a bordered pill badge labeled "Step 1", "Step 2", or "Step 3", a short heading, and a paragraph. The mockup side alternates left and right on each row so the layout zigzags as the reader scrolls.
The three mockups are independent: a connection list, a campaign calendar, and a metrics dashboard with a bar chart. The heading, subhead, step labels, titles, and descriptions are all plain text you can replace freely. You can add or remove rows and swap each mockup for one that fits your product without affecting the others.
Reach for this block when you need to walk a candidate or hiring manager through a multi-step workflow that is best understood in sequence and benefits from a visual at each stage. It outperforms a plain numbered list or a horizontal connector when each step has its own UI state worth showing, and it outperforms a tabbed layout when you want all steps visible at once so readers can scroll at their own pace. On an HR and hiring platform this is a natural home for "post a role, review applicants, extend an offer" sequences that map one UI screen to each step.
A natural flow around it on a Marketing Pro page:
Before
After
Each row pairs a step description with a matching UI snapshot, so the frame works wherever a visual reinforces the instruction. A few fits for an HR product:
Tip: keep each step description to two or three sentences so the copy column stays visually balanced against the mockup beside it.