The Accordion offers further information on a page while keeping the page length as short as possible.



Accordion example
Each fold-out element contains a headline and an arrow. When fold-in, the arrow points down, when fold-out, the arrow points up.


Accordion elements
Depending on the case, the Accordion can contain different elements:


Accordion sizes

The Accordion can be placed over

          a. L (8 columns centered)
          b. M (6 columns)
          c. floating in S (4 columns)

Accordion responsive behavior

Left: The Accordion behaves the same in all versions of the three largest viewports. 

Right: Only the smallest viewport shows a 12 columns-wide accordion.

Related topics


Kontakt und Feedback

Das Team Brand Consultancy berät Sie gerne bei Fragen: Kontakt.
Wir freuen uns über ein Feedback zum Brand Portal.