How they help
By allowing users to expand and collapse sections, accordions reduce scrolling and shorten page length, enabling users to focus on specific sections without being overwhelmed by too much information at once. This improves readability and accessibility, while also streamlining navigation, making it easier for users to find and access relevant information quickly.
Example of accordions
Anatomy
- Open panel: holds interchangeable content
- Header: contains icon, label, badges and icon
- Icon: optional visual to help give clarity to user
- Title: clear and concise text giving the user insight into the content
- Badge❖: optional content to help give clarity to user
- Focus ring: visual focus state
- Open/Close icon: interactive element that allows user to open and close the accordion
Visual reference for anatomy
Variants
There are 2 variants of the component: with badges and with icon.
-
Badges improve content organization and user experience by giving a brief preview of the contents, making navigation easier, and helping with searchability. They help users find specific topics or themes easily and provide extra context to help them decide whether to open the accordion.
- Icons can visually improve clarity to the user.
Visual of accordion variants
Designer resources