Component Card

Accordion

Progressively reveal dense details without leaving the page.

Accordion anatomy

When to Use

FAQ and help sections with many optional details.
Settings groups where advanced fields are rarely needed.
Mobile layouts when full content would create extreme scrolling.

When NOT to Use

Use accordion items with clear headings so collapsed content is still understandable.

If content is short and always needed, keep it visible in a normal stack.

Variants

Single-open

Multi-open

Icon-left trigger

Confused?

Use Accordion for on-page reveal, and use Modal when the task needs focused interruption.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Implement an accessible accordion for FAQ content with smooth expand/collapse, clear open state, and keyboard support.

Pencil Prompt

Design an accordion list with one expanded item and distinct trigger styling that communicates click-to-reveal behavior.

Next Lesson

Button