Stepped Collapsible
Numbered collapsible steps that reveal instructions one at a time. Use it for onboarding or setup guides where readers work through tasks in order.
Numbered collapsible steps that reveal instructions one at a time. Use it for onboarding or setup guides where readers work through tasks in order.
Search blocks by description or jump to a page.
Stepped Collapsible is a single collapsible panel built around a numbered list. A trigger row shows a title and a chevron that swaps direction when the panel opens. Below the trigger, the expanded area reveals a left-bordered region containing a sequential ordered list, each item on its own line with consistent vertical spacing between steps.
The panel holds one set of instructions by default, but the title, step count, and the text of each item are all free to change. You can shorten the list to two or three steps or extend it to cover a longer process. The border accent and the toggle behavior stay intact regardless of how many items you include.
Reach for this block when you need to surface a short procedural sequence without committing permanent space on the page. It fits naturally on a real estate marketplace where a listing detail page might tuck away an application checklist or a document submission walkthrough that only some visitors need to read. Compared to a plain accordion group, this single panel keeps the focus on one coherent task rather than splitting attention across several categories.
A natural flow around it on a Components page:
Before
After
The block gives you one tidy container for any short ordered process:
Tip: keep the step list to five or six items so the expanded panel stays short enough to read without scrolling past the surrounding page content.