Accordion Steps
A split process section pairing a four step accordion of numbered onboarding steps with a window styled data sync mockup and progress meter.
A split process section pairing a four step accordion of numbered onboarding steps with a window styled data sync mockup and progress meter.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Accordion Steps divides the section into two columns. The left column opens with a heading and a short supporting sentence, then stacks four numbered steps as an accordion. Each trigger pairs a small tinted badge carrying the step number with a bold title, and expanding a step reveals a duration line and a short description below it. The first step is open by default so the section reads as active on load. The right column holds a window styled panel of source connections, each with a sync status dot and record count, above a progress meter tracking how many are complete.
The two columns are independent. You can rewrite the heading, subheading, and every step title, duration, and description without touching the panel, and you can add or remove steps from the accordion freely. The sync panel is driven by its own connections array, so you can swap the source names, record counts, and statuses to match your own product while the step list stays in place.
Reach for this block on a product marketing page for a workspace or platform where onboarding is the story worth telling, and where the value is that the product does most of the setup for the customer. The accordion keeps the section compact while still letting each step carry a real explanation, and the sync mockup beside it shows the work happening, which makes it stronger than a plain step list when you want visitors to feel the setup is already underway.
A natural flow around it on a Marketing Pro page:
Before
After
The clearest fit is a short onboarding or activation flow paired with a live status view. A few other ways to use the frame:
Tip: keep each step description to one or two short sentences so the accordion stays visually balanced with the sync panel beside it.