Search…
Search…
Accordion
Live in Codebase
An accordion is a UI component that organizes content into collapsible sections, allowing users to expand or collapse information as needed. It helps keep interfaces clean and structured by displaying only relevant content at a given time.
AA
WCAG 2.1 accessibility compliant
Accordion
Live in Codebase
An accordion is a UI component that organizes content into collapsible sections, allowing users to expand or collapse information as needed. It helps keep interfaces clean and structured by displaying only relevant content at a given time.
AA
WCAG 2.1 accessibility compliant
Accordion
An accordion is a UI component that organizes content into collapsible sections, allowing users to expand or collapse information as needed. It helps keep interfaces clean and structured by displaying only relevant content at a given time.
Figma Designs
Figma Designs
Figma Designs
By using accordions, you provide a more interactive way for users to explore content at their own pace, reducing cognitive load and improving overall usability. When designed properly, accordions enhance the browsing experience without hiding essential information.
Accordions are useful for structuring content efficiently while keeping interfaces minimal. They should be used when users don’t need to see all content at once but require easy access to specific sections.
When to use | When not to use |
|---|---|
✅ FAQs and Help Sections | ⛔️ For essential content |
✅ Content-heavy pages | ⛔️ Too many nested sections |
✅ Mobile layouts |
Anatomy
The accordion consists of three key elements: a clickable title that triggers content visibility, a body area for detailed information, and a chevron icon that rotates to indicate the current expanded or collapsed state.
Element | Description |
|---|---|
| The title describes the content the row can reveal. Titles are configurable to small (default) or large size. Titles can wrap to multiple lines if needed, but it’s best to keep them concise. |
| The body area of an accordion row can include text, images, or other components. The accordion height will flex to fit various types of content. For paragraph text, keep the line length between 40–75 characters (counting both letters and spaces). |
| Lucide Icon, Chevron Up |
States
Accordions have three visual states: closed (neutral styling, ready for interaction), open (purple border with background tint and rotated chevron), and disabled (muted colors with no user interaction).
Spacing
Consistent spacing maintains visual hierarchy and comfortable touch targets. Internal padding provides breathing room while external margins separate accordion items, following design tokens for seamless integration with other components.
By using accordions, you provide a more interactive way for users to explore content at their own pace, reducing cognitive load and improving overall usability. When designed properly, accordions enhance the browsing experience without hiding essential information.
Accordions are useful for structuring content efficiently while keeping interfaces minimal. They should be used when users don’t need to see all content at once but require easy access to specific sections.
When to use | When not to use |
|---|---|
✅ FAQs and Help Sections | ⛔️ For essential content |
✅ Content-heavy pages | ⛔️ Too many nested sections |
✅ Mobile layouts |
Anatomy
The accordion consists of three key elements: a clickable title that triggers content visibility, a body area for detailed information, and a chevron icon that rotates to indicate the current expanded or collapsed state.
Element | Description |
|---|---|
| The title describes the content the row can reveal. Titles are configurable to small (default) or large size. Titles can wrap to multiple lines if needed, but it’s best to keep them concise. |
| The body area of an accordion row can include text, images, or other components. The accordion height will flex to fit various types of content. For paragraph text, keep the line length between 40–75 characters (counting both letters and spaces). |
| Lucide Icon, Chevron Up |
States
Accordions have three visual states: closed (neutral styling, ready for interaction), open (purple border with background tint and rotated chevron), and disabled (muted colors with no user interaction).
Spacing
Consistent spacing maintains visual hierarchy and comfortable touch targets. Internal padding provides breathing room while external margins separate accordion items, following design tokens for seamless integration with other components.
By using accordions, you provide a more interactive way for users to explore content at their own pace, reducing cognitive load and improving overall usability. When designed properly, accordions enhance the browsing experience without hiding essential information.
Accordions are useful for structuring content efficiently while keeping interfaces minimal. They should be used when users don’t need to see all content at once but require easy access to specific sections.
When to use | When not to use |
|---|---|
✅ FAQs and Help Sections | ⛔️ For essential content |
✅ Content-heavy pages | ⛔️ Too many nested sections |
✅ Mobile layouts |
Anatomy
The accordion consists of three key elements: a clickable title that triggers content visibility, a body area for detailed information, and a chevron icon that rotates to indicate the current expanded or collapsed state.
Element | Description |
|---|---|
| The title describes the content the row can reveal. Titles are configurable to small (default) or large size. Titles can wrap to multiple lines if needed, but it’s best to keep them concise. |
| The body area of an accordion row can include text, images, or other components. The accordion height will flex to fit various types of content. For paragraph text, keep the line length between 40–75 characters (counting both letters and spaces). |
| Lucide Icon, Chevron Up |
States
Accordions have three visual states: closed (neutral styling, ready for interaction), open (purple border with background tint and rotated chevron), and disabled (muted colors with no user interaction).
Spacing
Consistent spacing maintains visual hierarchy and comfortable touch targets. Internal padding provides breathing room while external margins separate accordion items, following design tokens for seamless integration with other components.
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.