Search blocks by description or jump to a page.
An accordion styled as numbered steps with connecting markers. Ideal for setup flows, tutorials, and any process that readers complete in order.
Stepped Accordion renders a single-open accordion inside a narrow centered column. Each item consists of a rounded bordered trigger row and, when open, an indented content panel set off by a vertical left border. The trigger row tints slightly when its panel is active so the open item stays visually distinct from its closed neighbors. Only one panel can be open at a time, and collapsing is available so every item can be closed.
The three items, their question text, and their answer copy are all independent. You can add or remove items freely, and the left border rail on the open panel can hold any inline content. The centered narrow container suits an embedded placement rather than a full width layout, making it easy to drop into a sidebar or a focused content region.
Reach for this block when you need to present a short sequential list of questions or steps and want each answer visually separated from the trigger that opened it. On a product analytics SaaS page it works well as an embedded FAQ inside a feature section, a dashboard onboarding panel, or a compact help widget alongside a data chart. Compared to a flat list accordion the indented rail gives answers extra breathing room and a clear reading lane, which helps when answers carry a sentence or two of explanation.
A natural flow around it on a Components page:
Before
After
Each part of the block maps to a concrete element you can swap without touching the rest:
Tip: keep answers to two or three short sentences so the indented rail stays tight and the stepped rhythm reads clearly down the list.