Navigation
Accordion
Expandable content sections. A card with an optional numbered badge, a title and a plus/minus icon; the body slides open beneath the title.
Accordion hides secondary detail behind a heading so a long page stays scannable — in the source file, the selling points of a course and a refund comparison. A visitor opens only what they care about.
Each item is a white card. An optional blue number badge sits before the title, and a circular plus (closed) or minus (open) icon sits at the end. Clicking anywhere on the header row toggles the item.
Use AccordionGroup to stack several items. With type="single" opening one closes the others; with type="multiple" each opens independently. A lone Accordion works on its own too.
Items render closed on load. Figma draws both an open and a closed frame; the open one is there to show the layout and copy, not to be shipped.
- Ship every item closed. Open frames in a mock are for copy review only — never launch a page with all items open.
- Wrap related items in an AccordionGroup and choose single or multiple deliberately.
- Let long titles wrap onto two lines on mobile; the header grows rather than clipping.
- Don't animate to height: auto or a hardcoded max-height. The component uses a grid-row transition so any body length works.
- Don't put the only route to essential information inside a closed accordion.