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 Accordion

Standard

Hover accoordion

Hover

Expanded accordion

Expanded

Open accordion with alternative content

Open accordion with alternative content, i. e. image, graph, table


Desktop, white background

Standard accordion white background
Hover accordion white background
Expanded accordion 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

Accordion on gray background (Tint 4)

Accordion on white background

Accordion on gray background (Tint 4), expanded

Accordion on white background, expanded

Engineering progress

Enhancing lives

Maximum cart size of 3 items has been reached!

Your sample cart items:
Type
Decor
Collection