Accordions

In contrast to tabs, accordions group and structure content vertically and one below the other. They contain smaller amounts of content so that the previous and following sections remain visible.

They are particularly suitable for displaying content with longer descriptions. In this case, the following elements shift downward by the height of the additional content. Accordions have three different states: Standard, Hover, and Expanded.

The color depends on the alternating background. On a white background, the Hover state and the information field are displayed in light gray (Tint 4), on a light gray background in white. In addition to text information, accordions can also display additional content such as images, diagrams, slideshows, and tables. Accordions have a width of nine grid columns.