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.
Specifications
Anatomy
- Accordion item: contains the heading and the icon and is the control to collapse or expand the section.
- Heading: provides a description of the section.
- Icon: indicates if the item is open or closed.
- 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.
Behavior
Positioning
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.
Interaction
Accordion items come in two main states: collapsed and expanded. Each of the two are available in default and hover state as well.
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.