with icon
Design Systemv1.0COMPONENTS · ACCORDION
DESCRIPTION
An accordion is a set of expandable sections that organizes related content, allowing users to reveal or hide information as needed.
PLAYGROUND MODE
A collapsible header that reveals supporting text on demand. The accordion has three states: Default, Hover, and Expanded.
TYPES
The leading icon slot is optional — the title and chevron stay aligned the same way whether or not it's present.
STYLES
Choose from two distinct accordion styles: Outline (bottom border only, square corners) and Rounded (full border, 6 px radius).
SIZE
Size scales the title, subtext, and both icons together — Small (16 px title), Medium (18 px title), and Large (20 px title).
STATES
The accordion has three states: Default, Hover, and Expanded. Expanding swaps the trailing plus icon for a minus and reveals the subtext line.
TOKENS & TYPOGRAPHY
COMPONENT STRUCTURE