Search blocks by description or jump to a page.
An accordion with a double line framing every item. The layered borders add clear structure for FAQs and specs where rows need firm definition.
Double Border Accordion renders a vertical stack of collapsible items, each enclosed by two concentric rounded borders. The outer border sits flush with the item edge, and the inner border insets a few pixels to create a layered frame effect. When an item is open, both borders shift to a softer foreground tint with a smooth transition so the active panel reads clearly against the closed ones. A chevron trigger sits inside the padding layer, and the answer text appears below it when the panel expands.
Each item is fully independent, so you can change the question and answer text freely, add or remove items, and reorder them without affecting the frame styling. Only one panel can be open at a time by default, which keeps the layout compact.
This block suits pages where row definition matters as much as the content itself. In a fintech or banking product, the double border signals structure and formality without heavy decoration, making it a good fit for account FAQ pages, fee schedule breakdowns, or compliance question lists where readers scan for exact terms. Compared to a minimal line or card accordion, the layered frame adds visual weight that anchors dense regulatory or policy copy without relying on background fills.
A natural flow around it on a Components page:
Before
After
The frame works wherever firm row separation helps readers move through a list with confidence. A few fits:
Tip: keep answers to two or three sentences so the double border frames a tidy block of text rather than a sprawling paragraph.