Accordion

Design a reusable accordion component for dense content like FAQs, settings, or product specs. The component should work in a vertical list where each row has a clear header and a hidden panel that expands in place. Keep the structure simple enough to drop into different layouts without redesigning the control each time.

Each header needs a title, an affordance for expansion, and a clear hit area. Show how the control behaves on hover, focus, collapsed, and expanded states. When a panel opens, the content should read cleanly, with enough spacing and hierarchy that long text, links, or nested lists still feel organized.

Define the visual rules that make the interaction easy to scan: icon rotation or state change, divider handling, and how multiple items stack when one is open. The component should feel stable as content expands and collapses, with no ambiguity about which item is active.

Boost usability by ensuring each accordion panel can be operated with keyboard shortcuts, catering to accessibility and power users alike.