Zigzag Steps

About this block

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.

When to use

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

• A hero section to establish the product pitch before the process detail begins
• Three Step Cards as a lighter teaser if you want a compact summary above a fold before expanding into this layout

After

• A features section to reinforce specific capabilities once the workflow is clear
• A testimonials section so readers see real outcomes right after understanding the process

What you can display

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:

• Applicant pipeline view. Show a kanban or stage list mockup beside copy that explains how candidates move from applied to offer in one place.
• Interview scheduling flow. Pair a calendar mockup with copy about syncing interviewers, sending invites, and tracking confirmations without email chains.
• Offer and onboarding handoff. Use the dashboard mockup slot to display a completion checklist so new hires and HR teams see exactly what is done and what is pending.

Tip: keep each step description to two or three sentences so the copy column stays visually balanced against the mockup beside it.