Accordion

Accordions are interactive lists of headings that reveal additional content through progressive disclosure. They allow to organize larger amounts of information in an effective way, by removing excessive scrolling for users scanning content. However, no vital information should be buried within a collapsed section. This makes the high-level labeling of each item imperative to the component's success in allowing users to browse and discover meaningful information.

Usage guidelines

When to use

• To organize related content into multiple sections.
• When content length is excessive for the experience and might not be relevant for all users scanning through it.

When not to use

• When the user is expected to open and read all the sections.
• To show a process divided in steps: use Progress tracker instead.

Writing guidelines

Heading length

The labelling of each item is essential to the component's success. Keep the section's heading concise while still being clear and descriptive, so that users can predict whether the information they are looking for is in there.

Capitalization and case

Write headings in sentence case.

Overflow

If the heading is too long to fit in one line, it will automatically wrap onto another line.

Keep the heading as concise as possible.

Don't truncate the heading if it is too long.

If the heading is too long, it wraps to multiple lines.

Specifications

Anatomy

1. Accordion item: contains the heading and the icon and is the control to collapse or expand the section.
2. Heading: provides a description of the section.
3. Icon: indicates if the item is open or closed.
4. Panel: when expanded, displays a section's content.

Size

Accordion is available in Large (for desktop and tablet landscape) and Small (for tablet portrait and mobile).

Styling

• Accordion items are separated in between with a separator, to visually demarcate their boundaries.
• Accordion has no background so it inherits the one of the containers it is in. Make sure there is enough contrast between the text and the container background.

Maintain default font sizes and icons.

Don't replace accordion icons with custom ones.

Behavior

Positioning

Place accordion within the main page content.

Avoid nesting accordions within accordions.

Alignment

Accordion is aligned with the content of the page. The heading is aways left-aligned while the icon is always placed to the right of the container.

Place the icon to the right

Don't place the icon to the left.

Interaction

Accordion items come in two main states: collapsed and expanded. Each of the two are available in default and hover state as well.

Default: Accordion has all the items collapsed at its default landing state. However, it is possible to have the first item pre-opened when prompting the user to dive into the accordion's content as a primary goal of the page/process.

Expand: To expand the accordion item so it shows its content, simply press anywhere on its area. Multiple items can be open at the same time.

Collapse: To collapse an accordion, press on the item again

Accessibility guidelines

Design Considerations

• Keep in mind that when using accordions, the content of your page will become less discoverable.
• Make sure the heading of each accordion item describes the content within that section appropriately.
• Content within the accordion must be accessible too: read our Accessibility guidelines for detailed information.

Keyboard interaction

• Tab: to move focus between accordion items. If an item is expanded, moves focus on selectable item inside the accordion, if any.
• Space / Enter: to expand or collapse accordions.

Related components