Design

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet, and desktop — with no alternative versions required.

When to use it (and when not to)

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

State: Collapsed by Contrast

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-default#d4d2d1

color-border-contrast-default#e4e4e4

Accordion

Width: 312

Border radius: 0

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-muted#999999

color-border-neutral-muted#a8aaac

State: Expanded by Contrast

True

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-emphasis#ffffff

Text

Text color:

color-foreground-contrast-default#fbfbfc

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-muted#999999

color-border-neutral-muted#a8aaac

Text

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

State: Hover by Contrast

True

Icon and title

Width: 212

Title

Text color:

color-foreground-contrast-emphasis#ffffff

Line

Background color:

color-border-contrast-emphasis#ffffff

False

Title

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Line

Background color:

color-border-neutral-default#282830

State: Focus by Contrast

True

Accordion

Border color:

color-border-focus-contrast-default#ffffff

color-border-focus-contrast-default#60a7ff

Border weight: 2

Border radius: 2

Accordion

Contrast: True

False

Accordion

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Border radius: 2

Accordion

Contrast: False

Styling

Colors

Name	Applied as	Applied to
`color-foreground-contrast-emphasis`	Text color	Accordion Title
`color-foreground-contrast-emphasis`	Text color	Accordion Title
`color-foreground-contrast-default`	Text color	Accordion Title
`color-foreground-contrast-default`	Text color	Accordion Title
`color-foreground-contrast-muted`	Text color	Accordion Title
`color-foreground-contrast-muted`	Text color	Accordion Title
`color-foreground-neutral-default`	Text color	Accordion Title
`color-foreground-neutral-default`	Text color	Accordion Title
`color-foreground-neutral-emphasis`	Text color	Accordion Title
`color-foreground-neutral-emphasis`	Text color	Accordion Title
`color-foreground-neutral-muted`	Text color	Accordion Title
`color-foreground-neutral-muted`	Text color	Accordion Title
`color-foreground-neutral-subtle`	Text color	Accordion Title
`color-foreground-neutral-subtle`	Text color	Accordion Title
`color-border-neutral-muted`	Border color	Line
`color-border-neutral-muted`	Border color	Line
`color-border-neutral-default`	Border color	Line
`color-border-neutral-default`	Border color	Line
`color-border-contrast-default`	Border color	Line
`color-border-contrast-default`	Border color	Line
`color-border-contrast-emphasis`	Border color	Line
`color-border-contrast-emphasis`	Border color	Line
`color-border-contrast-subtle`	Border color	Line
`color-border-contrast-subtle`	Border color	Line

Text styles

Name	Applied as	Applied to
Lorem Ipsum `typography-body-6`	Text style	Text
Lorem Ipsum `typography-body-6`	Text style	Text
Lorem Ipsum `typography-body-6 (emphasis)`	Text style	Accordion Title
Lorem Ipsum `typography-body-6 (emphasis)`	Text style	Accordion Title

Usage

Do

Guidance on how to use a component.

Use it to organize and display content progressively, allowing users to reveal or hide information as needed.
Help reduce cognitive overload by showing only the most relevant content at first glance.
Use when the user does not need to see all information at once, or when content is grouped by topics or categories.
Maintain consistent spacing between accordions to support scannability and visual rhythm.
Use clear and descriptive titles for accordion headers to communicate their purpose.
When multiple accordions are used, consider whether they should expand independently or as a single-item expansion group (only one open at a time).
Keep animations smooth and consistent across variants and themes.
Verify that keyboard navigation and focus indicators work properly across all accordion items.

Don’t

Guidance on what to avoid when using a component.

Don’t use accordions to hide critical or frequently needed information. If users must always see the content, it shouldn’t be collapsible.
Avoid nesting accordions inside other accordions, as it complicates navigation and accessibility.
Don’t use too many accordion items in one view — it may cause scroll fatigue and reduce clarity.
Don’t rely on animation alone to signal state change — always provide clear visual or semantic cues.
Don’t rely solely on colour or icons to indicate the open/closed state — always include a clear visual cue (e.g. arrow rotation).
Don’t remove or modify focus states that help users understand where they are when navigating with a keyboard.
Avoid using accordions in layouts with minimal vertical space, where content expansion will disrupt the structure.

Best practices

Guidance on where this component has been used

Structure and behavior

Each accordion item should contain a title (trigger) and a content area (panel).
Titles must be keyboard-focusable and toggle their state using Enter or Space.
Only one interactive element should control the expansion to ensure proper accessibility.
The expand/collapse icon must rotate or animate consistently to reinforce the state change.
Maintain minimum touch target areas (44×44 px) for mobile/touch devices.

Content and copy

Keep titles short and scannable, typically one line.
Start titles with keywords that help users quickly identify the content.
Use sentence case for readability (e.g. “Account details” instead of “ACCOUNT DETAILS”).
When possible, use parallel structure across accordion titles (e.g. all start with verbs or nouns).

Accessibility

Accordions should use ARIA roles and attributes such as aria-expanded, aria-controls, and aria-labelledby.
Ensure all states (collapsed, expanded, hover, focus) meet WCAG 2.1 AA contrast standards.
All accordions must be fully operable via keyboard and navigable using Tab, and toggle them with Enter or Space.
When an accordion expands, focus should remain on the header for context retention.
Avoid disabling accordion headers unless necessary — they communicate interactiveness by design.