Design
This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet, and desktop — with no alternative versions required.
Anatomy
Section titled “Anatomy”Accordion title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
- Accordion
- Trigger
- Title
- Chevron
- Content
When to use it
Section titled “When to use it”Use the accordion when:
- You need to present several groups of related information, but not all of it needs to be visible at once.
- You want to reduce visual clutter and keep the page easier to scan.
- Users may only need to access some details depending on their specific needs or interests.
- You want to avoid long scrolling, especially on mobile devices or content-dense pages.
- The content in each section can be understood independently from the rest.
Avoid the accordion when:
- The content is essential for understanding the page and should remain visible without interaction.
- Users need to compare information across multiple sections at the same time.
- The page only contains one section of information (in that case, display it directly).
- Frequent opening and closing would interrupt the user’s workflow or slow them down.
Properties
Section titled “Properties”Accordion
The whole disclosure component — a <details> element that owns the open/closed state and wraps the trigger and content.
Trigger
The row that toggles the accordion. Always keyboard-focusable; the title text doubles as the accessible name.
Title
The label inside the trigger that names the disclosure and carries its accessible name.
Chevron
A chevron that rotates between collapsed and expanded states. Decorative — the open/closed state is also conveyed via aria-expanded.
Content
The collapsible content region. Hidden from assistive tech when collapsed and revealed in document order when expanded.
Platform considerations
Section titled “Platform considerations”Desktop
On desktop the full accordion stack is visible at once. Keep the trigger row tall enough for comfortable pointer targets and let the panel content flow naturally without artificial caps.
Tablet
The same stack adapts to narrower widths. Respect the 44×44 px touch target on the header so the component remains comfortable to tap.
Mobile
On mobile, prefer single-item expansion to reduce scroll jumps. Keep titles short so they fit on a single line at the smallest breakpoint.
Best practices
Section titled “Best practices”Use the accordion to progressively disclose detail — never to bury content users actually need.
Do
Group related items, write concise scannable titles, and keep consistent spacing between accordions to support visual rhythm.
Don't
Avoid nesting accordions, hiding essential information, or stacking more items than a user can reasonably scan in one view.
Content guidelines
Section titled “Content guidelines”Keep titles short and scannable — typically one line. Lead with the keyword that helps users identify the content at a glance, and use sentence case for readability (for example “Account details”, not “ACCOUNT DETAILS”). When several accordions sit together, write titles in parallel structure (all nouns or all verbs) so the group reads as a coherent set. Avoid hiding content that users need on every visit; if it’s critical, show it directly instead.