Numbered Accordion
An accordion with a number beside every question. The counted order suits step guides, ranked FAQs, and any sequence readers follow in turn.
An accordion with a number beside every question. The counted order suits step guides, ranked FAQs, and any sequence readers follow in turn.
Search blocks by description or jump to a page.
Numbered Accordion is a single column accordion list where each item carries a small circular badge on the left showing its position in the sequence. The badge sits flush with the left edge, and the question text and expand arrow are indented to clear it. Opening a panel makes the question text bold and reveals the answer below. One item can be open at a time; opening another closes the current one.
The number badges, questions, and answers are all plain copy, so you can swap in any content without touching the layout. The item count is flexible too: add or remove AccordionItem blocks to match however many entries you need. The max width container keeps the list comfortable to read at any screen size.
Reach for this block when the order of questions matters to your reader. On a real estate marketplace it suits a buyer guide or a loan process FAQ where prospects naturally work through steps in sequence before contacting an agent. It outperforms an unordered accordion when the items build on each other, because the numbered badge tells readers where they are and how many questions remain. For a flat FAQ where order is arbitrary, a simpler style like the Minimal Line Accordion keeps the list lighter.
A natural flow around it on a Components page:
Before
After
Each item is fully independent, so you can tailor the content without affecting the surrounding layout:
Tip: keep questions short enough to fit on one line in the trigger row so the numbered badge and the chevron stay visually aligned.