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.
Desktop, gray background (Tint 4)
Standard
Hover
Expanded
Open accordion with alternative content, i. e. image, graph, table
Desktop, white background
Standard
Hover
Expanded
Mobile
Accordion on gray background (Tint 4)
Accordion on white background
Accordion on gray background (Tint 4), expanded
Accordion on white background, expanded