Nested Border Accordion
An accordion supporting nested items inside bordered panels. Use it for layered FAQs, docs, and settings where topics branch into subtopics.
An accordion supporting nested items inside bordered panels. Use it for layered FAQs, docs, and settings where topics branch into subtopics.
Search blocks by description or jump to a page.
Nested Border Accordion is a stacked list of collapsible panels, each wrapped in a double border frame. The outer ring is a full rounded border and a second, inset ring sits just inside it at a slightly reduced opacity. When a panel is closed both rings sit at the default border color. When a panel opens, both rings shift to a more prominent foreground tint and a horizontal rule appears between the trigger row and the answer text below it. Panels are spaced apart so each one reads as its own contained unit rather than a continuous list.
Each panel is independent. The question text, the answer text, and the number of panels are all yours to change. Because each item is a self contained block, you can add or remove panels without any ripple to the surrounding layout. The single open at a time behavior is set by the collapsible accordion mode, but that too can be adjusted if you need multiple panels open simultaneously.
Reach for this block when your FAQ or help content has clear, bounded categories that benefit from visual separation. The double border frame gives each panel a quiet sense of structure, which suits a logistics or delivery platform where customers need to scan shipping policies, customs requirements, and return conditions without the sections bleeding into one another. It fits a support page, a carrier FAQ, or a booking help center where the bordered frames signal that each question stands on its own.
A natural flow around it on a Components page:
Before
After
Each panel is a self contained unit with a question trigger and an answer body. Three things you are most likely to swap:
Tip: keep answer text to two or three sentences per panel so the double border frame stays proportionate and the list remains easy to scan.