Dash Line Accordion
An accordion divided by dashed lines between items. The light dashed rhythm keeps long FAQ lists readable while staying subtle and unobtrusive.
An accordion divided by dashed lines between items. The light dashed rhythm keeps long FAQ lists readable while staying subtle and unobtrusive.
Search blocks by description or jump to a page.
Dash Line Accordion is a single-column accordion list centered in a constrained container. Each item has a question as its trigger row and a short answer that expands below it. The divider between items is a dashed horizontal line rather than a solid border. When an item is closed the dashes sit at half opacity; opening an item brings the dashes to full opacity, giving a quiet signal that this row is active. Only one panel can be open at a time.
All three items are independent, so you can rewrite the questions and answers, add or remove items, or adjust the container width without affecting the rest of the layout.
This layout suits any FAQ section where you want clear row separation but a lighter touch than a solid border. On an ecommerce storefront it works well for product detail pages, shipping and returns sections, or checkout help, where the dashed rhythm keeps a long list readable without competing with product imagery or pricing. It is a better fit than a card accordion when you want the content to breathe, and quieter than a glow or shadow variant when the surrounding page is already visually busy.
A natural flow around it on a Components page:
Before
After
Any set of short questions and their answers fits this frame. A few ways to put it to work on a storefront:
Tip: keep answers to two or three sentences so the dashed rhythm stays consistent and no single open panel dominates the page.