Components

Accordions

scss:Readyfigma:Ready
vue
:Ready
freemarker
:Ready
webComponent
:Ready

Accordions allow you to show or hide related content under vertically stacked lists.

When to use

Please use accordions for complementary content when you need to have a minimum scroll.

States

This pattern is available in a closed or an opened version.

Closed

The closed version is the default state and it can be identified with the plus sign icon. It allows to minimize the scroll and quickly view the different stacked accordions.

Opened

The opened version expands the accordion to show the content within it. Unlike the opened version, it can be identified with the minus sign icon.

Displaying accordions with icons

The accordion pattern can be used with an illustrative icon before the title when you have to add a piece of additional visual information.

Variations

Sizes

You will find two different sizes for the accordions. The smallest version should be used for secondary content. The default version is bigger and is best suited for readable content.

Be aware

Always think about accessibility when you use smaller accordion sizes.

Alignment

We provide two different types of alignment to adjust to your needs.

Without horizontal padding

This version allows you to vertically list accordions without horizontal padding (mainly used on larger breakpoints).

Accordions-NoPadding

With an 8px horizontal padding

This version has an 8px padding allowing you to stack accordions that suits better smaller screens.

Accordions-Padding

Do's and don'ts

Use this navigation for related content.
Hide mandatory or important content in accordions.