Card Accordion
An accordion built from separated cards, each panel raised on its own surface. Good for FAQs or feature details that need clear visual separation.
An accordion built from separated cards, each panel raised on its own surface. Good for FAQs or feature details that need clear visual separation.
Search blocks by description or jump to a page.
Card Accordion presents a vertical stack of accordion items where each panel lives inside its own rounded, bordered card. Every card carries a lightly tinted header that deepens when the panel is open, a thin divider between the header and the answer, and a subtle shadow that lifts slightly on the active item. Only one panel can be open at a time, so the list stays focused and uncluttered.
The three demo items cover accessibility, styling, and animation, but the count, questions, and answers are all yours to change. Cards can be added or removed freely, and the single collapsible mode can be switched to allow multiple panels open simultaneously if your content calls for it.
This layout suits any FAQ section where the questions need clear visual separation rather than a plain divider line. On a product analytics SaaS site it works well for a pricing page FAQ, a feature comparison section, or an onboarding help panel where each answer stands alone and a user scanning for one specific question should be able to find it at a glance. The card framing gives each item more visual weight than a flat list, making it a better fit than the Minimal Line Accordion when the page already has a dense layout and the FAQ needs to hold its own.
A natural flow around it on a Components page:
Before
After
Replace the demo questions and answers with any content that benefits from progressive disclosure. A few directions that fit the card format well:
Tip: keep each answer to two or three sentences so the shadow lift on open feels like a reveal rather than a wall of text.