Accordion

Accordion provides collapsible content panels for organizing and displaying information in a space-efficient manner with smooth expand/collapse animations.

Visual Specifications

Property	Value
Header Height	48-56px
Padding	16-20px horizontal
Border Radius	4-8px
Border Width	1px
Font Size	14-16px (title)
Icon Size	16-20px
Animation Duration	250-350ms

States

Chevron points right/down, content hidden

Chevron rotated, content visible with animation

Grey with reduced opacity, not interactive

Subtle background change, pointer cursor

Behavior Variants

Variant	Description
Single Open	Only one panel can be open at a time
Multiple Open	Multiple panels can be open simultaneously
Default Open	One or more panels open by default
Always Open	Panels cannot be collapsed

Icon Styles

Style	Description
Chevron	Standard right/down arrow
Plus/Minus	+ when collapsed, - when expanded
Caret	Triangle pointing direction

Content Types

Type	Usage
Text	Plain text content
Rich Content	HTML, lists, links
Form Elements	Inputs, checkboxes inside panels
Nested Components	Other components within accordion

Usage Guidance

When to use

Organizing large amounts of content
Progressive disclosure of information
FAQ sections
Settings panels with categories
Document or help content organization

Best practices

✅ Do	❌ Don’t
Keep titles concise and descriptive	Use vague headings
Logically group related content	Mix unrelated topics
Allow panel content to breathe	Overfill panels
Use meaningful icons	Skip visual indicators
Consider mobile touch targets	Make headers too small
Persist state when appropriate	Random open/close behavior

Accessibility

Keyboard navigation with Enter/Space
Accessibility (expanded state)
Proper heading hierarchy
Focus visible indicators
Screen reader announcements

Content Guidelines

Element	Recommendation
Title Length	20-50 characters
Title Style	Sentence case
Content Structure	Use subheadings for long content
Panel Count	3-8 items recommended