Accordions
Accordions show and hide content behind a clickable title, keeping dense pages scannable. The chevron rotates to mirror the open state, and the open and close motion is animated.
Variants
| Variant | Open | Closed |
|---|---|---|
| Card | Yes | Yes |
| Inline | Yes | Yes |
- Card - A bordered, rounded surface with generous padding. Use it when the accordion stands on its own.
- Inline - No border, radius, or side padding. Use it inside cards, lists, or other surfaces that already provide their own container.
Accordions can be found in the Figma Template in the Components page.