Accordion

This page describes the possibilities of the accordion component. An accordion is a wrapper around a single item (also known as a collapsible) or multiple items.

An accordion is used to organize and allow for navigation within content that are related to each other and exist within the same level of hierarchy. If you need an FAQ, you might consider the FAQ component.

Collapsible

A collapsible is an accordion with only one item.

You can place whatever content you'd want here.

Accordion

An accordion consists of multiple items.

Guidelines

- Use different titles for each item.

You can place whatever content you'd want here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a placerat erat, sed eleifend justo. Donec ut placerat dui. Nulla magna elit, pulvinar sed feugiat sed, vulputate eu tellus. Sed porta dignissim dui, eu lacinia tortor maximus et. Cras placerat turpis id ante egestas pharetra. Morbi scelerisque commodo risus, sollicitudin volutpat arcu pellentesque a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus vitae nisi nec sem consequat ultricies a at mauris. Maecenas consectetur a eros ac aliquam. Donec in leo odio. Curabitur sagittis facilisis magna malesuada posuere. Nullam iaculis, nisl et ultricies porttitor, massa lectus tincidunt eros, vel mattis felis enim nec ex. Mauris porttitor mattis arcu, eget semper tortor dictum eget. Ut sit amet finibus dui, vitae malesuada velit.

Accordion

Theme: items with an icon

There is an option to add icons to the items. These are configured in the dialog of each item.

Guidelines

- Do not mix items with and without icons. Either apply icons to all items or use none at all.

Text.

Text.

Theme: items with a grey background

There is an option to change the background in the dialog of each item.

Guidelines

- Do not mix items with grey and transparent backgrounds. Either apply grey background to all items or use none at all.

Text.

Text.