AI Assistant

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

VariantOpenClosed
CardYesYes
InlineYesYes
  • 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.