Dotted Border Accordion
An accordion framed by a dotted border around each panel. The playful dotted outline suits informal FAQs, help docs, and friendly onboarding tips.
An accordion framed by a dotted border around each panel. The playful dotted outline suits informal FAQs, help docs, and friendly onboarding tips.
Search blocks by description or jump to a page.
Dotted Border Accordion is a stacked single-open accordion. Each item sits inside its own rounded panel outlined by a dashed border. When a panel is closed the outline renders at reduced opacity, giving the list a light, open feel. When a panel is open the dashed border steps up to full opacity, clearly marking the active item without any background fill or color change. A chevron icon on the right of each trigger rotates as the panel opens and closes, and the answer content fades in beneath the question with a smooth height transition.
The three demo items and all copy are independent. You can add or remove panels freely, rewrite every question and answer, or drop the component into a narrower column by adjusting the container width. One panel can be open at a time; closing one automatically collapses any previously open item.
Reach for this block when you want an FAQ or help section that feels approachable rather than rigid. Developer tools sites benefit from the dotted outline because it reads as informal and precise at the same time, fitting a tone that is friendly toward engineers without being loud. It works well on a documentation page, a support landing, or an onboarding checklist where readers expand only what they need and the rest of the list stays quiet.
Compared to the card accordion the dotted variant uses no raised surface, so it integrates into a content column without adding visual weight. Compared to the minimal line accordion it still marks each item as a distinct unit, which helps when questions need clear separation.
A natural flow around it on a Components page:
Before
After
Each panel is self-contained, so you can tailor the content and count without affecting the surrounding layout:
defaultValue to the accordion to land
on the page with a specific panel already expanded.Tip: keep answers to two or three sentences each so the dotted outlines stay evenly sized and the list reads as a quick reference, not a wall of text.