Components

Accordion

Accordion provides a frame with a header that can be expanded to reveal additional content. Multiple accordion elements may be grouped together.

Usage

Use Accordion in scenarios where you need to provide additional information or controls. Example uses can be among others: Q&A articles in a help section or additional form controls that are not mandatory for completion of a task.

Content

Consider what content is appropriate to place within an accordion.

Use Accordion to reveal optional or extra information or controls.

Don’t hide critical information or mandatory controls in a form inside an accordion.

Alternatives

Specifically for contextual help, a contextual dialog may be the preferable choice of component.

Formatting

Anatomy

Accordion consists of a frame containing a title and an icon, along with a content section in its expanded state.

1. Collapsed
   a. Title
   b. Stroke
   c. Icon
2. Expanded
   a. Title
   b. Stroke
   c. Icon
   d. Content

Title

The title of the frame displayed both in the collapsed and expanded state. The title text may overflow into multiple lines if required.

Stroke

The stroke serves as a visual divider between the base items of the Accordion, helping to distinguish individual sections and improve readability.

Icon

The icon indicating whether the accordion is currently in its collapsed or expanded state. When transitioning between the collapsed and expanded states the icon rotates 180 degrees in a brief animation.

Content

The content revealed in the expanded state.

Behavior

States

When interacted with, the frame expands from the collapsed state, revealing additional content. Unlike for example a dropdown menu, accordion pushes other content (or other accordion elements in the group) located below.

Collapsed

Expanded

Modify

Accordion can be extended or contracted horizontally as desired but usually expands to the horizontal edges of the surrounding frame.

Title

A helpful title indicating what the user could expect to be revealed when interacting with the component.

Content

Accordion allows for certain freedom in what content it may contain. Typically, the content of the expandable section is text, or a list, such as an article or a help section. More complex content such as graphics or additional form controls can also be considered appropriate.

Theme

A flat version of accordion is available, stripped of borders and elevation, intended to be used within a card with a expandable sub section.