Accordion

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

.

Example

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.
.

Elements

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

Sizes

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.