Switch to Wilmington
DesignDevelop
Version 4.5.1
Overview

Accordion

Accordions are a vertically stacked list of headers that toggle the display of related sections of content.

Accordions can decrease cognitive load by grouping information and only presenting content that the user has selected. However, given their purpose, there is an inherent risk that users will miss information within the accordion. Do not use this component if it is crucial or required that a user review the content under all accordion headers.

Usage

Related body content

Related body content

Related body content

Accordion
Accordions are presented by default in the collapsed state. Their header titles are black and the plus icon indicates that their is additional information available to view. When selected, accordions will change to their open state in which the header titles become primary green and the icon changes to a minus sign to toggle hiding that panel's content.

Design Environment

The accordion is best used in environments where there are space constraints, such as on mobile or within side panels. They are also used as an alternative to other content grouping components, such as tabs, at smaller breakpoints to avoid side scroll. Keep a margin of at least 16px between the top of the accordion and any components above and below it. Accordions fill the width of their containing element.

Microcopy

Accordion headers should clearly summarize the information in the panel. They should be succinct and fit onto one line. Follow the microcopy guidelines in the Title element for more information.