Accordion

Usage

Development

About

An Accordion item is a basic list item that can be clicked or tapped to expand (show) and close (hide) content. Often a list of Accordion items is composed for creating a Frequently Asked Questions (FAQ).

Anatomy

An Accordion item (1.) can be composed of one, two or three slots.

Leading slot: a leading slot is the slot on the left. It’s meant for leading items only.
Text slot: a text slot is the slot in the middle. It contains a headline.
Trailing slot: a trailing slot is the slot on the right. It allows to open and close the accordion.

Accordion anatomy

An Accordion item may be composed without a leading slot, but can never be composed without a text slot and trailing slot.
The divider is an mandatory element in an Accordion item.

An Accordion content panel (5.) is a space that allows for content and wraps that content. Currently, it can contain just body text.

Accordion anatomy

When to use an Accordion item

When users just want to read, and therefore collapse, the content of a few accordion items.
When the content of the different accordion items are independent from each other and users probably won’t need to combine or compare pieces of content.

Mobile specific When the content makes a mobile page very long, accordion items can be a great way to lower the page load and allow users to scroll less. Hence, the reasons below (When not to use) should be considered.

When not to use an Accordion item

When users might want to compare or combine the information of several Accordion items.
When the page you are using Accordion items on, seems quite empty when all accordion content is hidden by default. Showing all content just on the page would then be a better idea.
When you’re using Accordion items in different levels what might cause users become lost.
When you want users to keep their attention while reading (almost) all content, and clicking Accordion items may interrupt them.

Sizes

The Accordion item comes in 2 sizes: small and large. The small sized Accordion item is the default size. However, you can choose to use the large sized Accordion item on desktop if you want.

Small

Text size: Desktop/Body/Apple/400
Height: 56px

Large

Text size: Desktop/Body/Apple/500
Height: 74px

Accordion size

Behaviour

Statuses
An Accordion item has the following states: Enabled, Hovered, Pressed and Focused.

Accordion behaviour

Default By default an Accordion item’s content is hidden. If there’s a clear indication users visit the page or screen for one specific Accordion item and its content, the content can be shown by default.

Auto close option If using a list of Accordion items, expanding one Accordion item can automatically close another (expanded) Accordion item. This behaviour is preferred and therefore default.

Interaction Clicking anywhere on an Accordion item triggers the expanding and closing behaviour.

Animation

The arrow down turns into a arrow up with an animation.
The content within the Accordion item content panel appears and disappears with an animation as well.

Keyboard behaviour

By using Enter an Accordion item should collapse and close, so therefore show and hide the content.
By using Tab users can navigate through the Accordion items from top to bottom.

Content

Use of labels The structure of the labels of Accordion items should be similar to each other. For example: one headline phrased like a question? Then all headlines should be phrased like a question (for in the FAQ).

Hidden content The hidden content of Accordion items should preferably be structured in the same manner as well. For example: work consistently with paragraphs or bullet lists. This way users can easily scan through the items and compare the content.

Use of icons The best icon in an Accordion item is an “angle down” and that’s why this one is build as a default within the component. Don’t use another icon for it, unless you have a good reason for it. See Resources below.

Stacking Accordion items Accordion items should be stacked vertically to create a list. The dividers are automatically separating the Accordion items.