Accordion Element
The Accordion element groups collapsible content areas, perfect for FAQ sections or organizing complex information into compact, expandable blocks.
Live Preview
Accordion Preview
Specifications
Accordions manage multiple items that can expand and collapse independently:
- Selection Mode: Set to Single (one item open at a time) or Multiple (multiple items open simultaneously).
- Initial State: Define Default Expanded Keys to choose which items are visible from the start.
- Visual Variants: Choose between Default, Bordered, Shadow, or Light based on the container's style.
- Thematic Colors: Control the Inactive and Active Background & Text colors for the headings.
- Custom Indicators: Optionally provide custom open/closed Icons or use the standard chevrons.
- Item Structure: Nest any collection of children inside Accordion Item elements to create the content area.
AI Guidance
How to prompt for Accordions:
- Add an FAQ accordion with three items and a bordered style.
- Create a single-open accordion that uses the brand's primary color when active.
- Insert an accordion for product features that shows the first item by default.