Accordion

Accordions consist of a vertical list of headers that can be expanded to show more information, or collapsed to hide them. It allows for the tidy grouping of content so users can quickly scan and find topics that they want to interact with.

Accordion

Usage

When to use
Use accordions to let users scan section headers and expand those that interest them. They're suitable when users don't need to read through everything on a page, and on smaller screens to reduce the need for scrolling.
How best to use
Accordion headers
Accordion headers act as information architecture to support navigation. Summarise the most essential information upfront in the accordion title, so users can have immediate understanding of the section. Our accordion variants also allow for status tags and policy information, such as dollar values. Always label accordions with accurate headers so users don't miss out on critical information.
Content card image
Don't
Don't create nested content with navigational controls in accordions, such as additional accordions or tabs.
Content card image
Don't
Don't embed forms within accordions. Accordions are primarily informational and shouldn’t be used for user input.
When not to use
Don't use when the user needs to read or compare all information on a page
If the content is important, keep all content visible instead of hiding it in accordions, so users don't miss out on key information.
⁠
Don't use it to group unrelated information together
Make sure the information within accordions is properly and logically grouped according to topic.