Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Accordion

Accordion

Disclosure items with independently styleable triggers, indicators, and content.

Anatomy

  • 1 .accordion-root Accordion collection boundary.
  • 2 .accordion-item One disclosure section.
  • 3 .accordion-item-trigger Button that expands or collapses an item.
  • 4 .accordion-item-indicator Icon communicating the item state.
  • 5 .accordion-item-content Collapsible panel owned by an item.

Variants

  • Contained et— Etesie extension
  • Ghost et— Etesie extension
Color, type, spacing, shape, elevation, motion and icons flow into this recipe.
Default

When to use

Use an accordion to progressively disclose related sections when people usually need only one or two at a time.