Accordion

Vertically stacked sections that expand and collapse, perfect for keeping dense content tidy and scannable.

Install

Examples

Default

A single section with a heading and slotted body content, collapsed on load.

Scale is a design system for Figma and Framer that helps individuals and organisations scale their design workflow.

Open by default

Set open to expand a panel on load — useful for the first item or a high-priority answer.

Scale uses semantic CSS custom properties that switch between light and dark themes automatically. No manual variant management needed.

Stacked

Place accordions back-to-back; each opens and closes independently.

Answer to the first question goes here. Answer to the second question is expanded by default. Answer to the third question goes here.

Guidelines

Usage

FAQ sections, settings panels, and content that should stay hidden by default but remain accessible on demand.

Do

  • Keep headings short and descriptive so the collapsed list stays scannable.
  • Use it for secondary or optional content that not everyone needs at once.
  • Let each section open and close independently.

Don’t

  • Don’t hide information everyone needs — show that inline instead.
  • Don’t nest accordions inside accordions.
  • Don’t use one to switch between peer views — reach for Tabs.

Accessibility

Properties

Related