EN: Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Components    3.1.Accordion

3.1.Accordion

An accordion is a component that aggregates a big amount of content in a small space through progressive disclosure. The user gets a brief detail about the hidden content and can expand it to read the full amount.

This component is very useful on mobile platforms or whenever vertical space is used to its maximum.

3.0.Components      3.1.Accordion      3.1.1.Usage

3.1.1.Usage

  • An accordion is composed by a vertically stacked list of headers that can be reveal or hide content associated with them. At Daimler the visual element that represent its state is the "+" (plus, when the tab is closed) or "-" (minus, when the tab is opened).
  • The accordions at Daimler can contain only text, text with supportive images, filters and (multiple) tables.
  • The Daimler accordion allows multiple sections to be expanded simultaneously.
  • There is no limit to the height of an open row. The width of an accordion varies based on the content, layout, and page design.
Some Image
Illustration

Accordion containing text and supportive image.

    Some Image
    Illustration

    Style used on mobile applications

      3.0.Components      3.1.Accordion      3.1.2.Download Resources

      3.1.2.Download Resources

      Designs of the Accordion component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.

      See the Sketch Design Kit