Accordions allow you to show or hide related content under vertically stacked lists.
Please use accordions for complementary content when you need to have a minimum scroll.
This pattern is available in a closed or an opened version.
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.
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.
The accordion pattern can be used with an illustrative icon before the title when you have to add a piece of additional visual information.
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.
Always think about accessibility when you use smaller accordion sizes.
We provide two different types of alignment to adjust to your needs.
This version allows you to vertically list accordions without horizontal padding (mainly used on larger breakpoints).
This version has an 8px padding allowing you to stack accordions that suits better smaller screens.