Best practices
The main purpose of the accordion component is to deliver large amounts of information using little space. The title gives the user an easy overview of the content, allowing the user to decide which sections to expand and read.
Accordions can make information processing faster. It does however hide content from users and it is important to keep in mind that a users might not notice or read all of the content. If all of the content is meant to be ready by the user, then don’t use an accordion as it adds the burden of an extra click; instead use normal page content like headings and paragraphs..
When to use
- To organise a set of related information
- To make non-crucial content more compact and minimise the length of the page
When not to use
- Don’t use the accordion when reading the content is important or even crucial for the user
Anatomy
- Accordion header
- Icon (optional)
- Title
- State icon: indicates if the panel is open or close
- Accordion content: container for the accordion body text (text, links, images)
Behaviour
The accordion component has two states: collapsed and expanded. The chevron icon at the end of the accordion indicates the state the item is in.
- Accordion items take up 100% width of their container (parent element).
- Accordions are collapsed by default with all content closed to give the user a high level overview of the available information.
- By default each item expands independently of other items, allowing multiple open items at a time.
Accordion header
- Users can toggle the expanded and collapsed states by clicking/pressing anywhere in the header area.
- The accordion header wraps to a second line without breaking a word. It is best practice to keep the accordion header on one line.
- The chevron points down to indicate collapsed and up to indicate expanded.
- When expanded, the chevron-down icon rotates -180 degrees to a downward position.
Variants
Icon is optional on accordion items and when displayed, content is indented to align with the title. This is however not the case on mobile as there, content always aligns to the container edge.
Media can be displayed in a 50/50 layout on either side (desktop/tablet) or above and below (mobile).
Placement
Can be used as part of the main page content or in a container such as cards and drawers.
Content guidelines
Title
- The title should be as brief as possible while still being clear and informative.
- The content text can consist of paragraphs, headings, links and images if needed.
Content
- Content should not scroll inside of an accordion item.
- Content should never scroll horizontally in an accordion.