Accordion - components - Design System

#Overview

Accordions are vertically stacked lists of headers that reveal or hide content associated with them.

An accordion provides the user with an overview of the content, thus allowing the user to decide what to read or ignore and scan the site faster. It helps to shorten a page and reduces scrolling. Hiding some of the content can also make a site appear less overwhelming.

The downside is the extra click for the user (increases interaction cost).

#When to use

To provide an overview of content with the choice to read or ignore the detail
To expose a large amount of content in a small space through progressive disclosure

#Don’t use for

Critical information that should be visible by default

#Anatomy

Icon: Indicates if the section is expanded or collapsed
Title of section (as brief and clear as possible)
Content: Body copy, product tiles, graphics, etc.

#Spacing

#Placement

Accordions can be placed in the main content or in the 3rd column.

For more flexibility in the user interface, the first or/and last divider can be hidden. For example, when the tab bar is above the accordion.

#Mobile

#Desktop

#Variations

#Icon placement

By default, an accordion is structured so that the chevron icon is placed on the right on both mobile and desktop.

However, there are two exceptions that relate to the size or additional action icons in the accordion. The icon placement can change, and can differ between mobile and desktop.

The accordion components have already been created. The following graphic is simply for explanation purposes to help you understand why the accordions can look different.