Accordion

Overview

The Accordion is a block used in order to help organize and present large amounts of content with an efficient use of space. It is designed to have a compact look and to serve tight spaces well.

It consists of a title which can be an H2-H6, and a paragraph

In order to create a group of accordions, e.g. for a FAQ section, you must add a new block for every heading you want.

Content of heading 1

Content of heading 2

Rules

Accordions should be used when presenting a large amount of content that can be grouped into logical sections. Using accordions can help to simplify the user interface and make it more intuitive for users to navigate the content. It is important to keep the accordion labels clear so the users understand exactly what the content is going to be.

Overuse of accordions is not a good UX practice because they increase interaction cost. Forcing people to click on headings one at a time to display full content can be cumbersome. Also, hiding the content behind navigation diminishes people’s awareness of it.

Accordions block should be used only inside columns.

Top