Accordion

Use an accordion to manage a large amount of content through dynamic switching.

Parts of the content are hidden in a container and only displayed by the user's action.

Overall styling#

  • The text-style is basic.
  • The line-height is set to default.
  • The outline has a 1px thickness.

Accordion#

  • The default/hover/focus state uses "arrow-down" and the open state use "arrow-up" as an icon.
 StatesAttributesPreview
Defaulttext-color: basic-black
outline-color: gray-dark
icon-color: basic-black
background-color: basic-white		 accordion: default
Hovertext-color: basic-black
outline-color: brand-primary-base
icon-color: basic-black
background-color: basic-white		accordion: hover
Focustext-color: brand-primary-base
outline-color: brand-primary-base
icon-color: basic-black
background-color: basic-white		accordion: focus
Openedtext-color: brand-primary-base
outline-color: brand-primary-base
icon-color: basic-black
background-color: basic-white		accordion: opened
 Disabledtext-color: gray-dark
outline-color: gray-base
icon-color: gray-dark
background-color: gray-lightest		accordion: disabled 

Content#

 StatesAttributesPreview
Openedoutline-color: brand-primary-base
background-color: basic-white		 content: opened

Spacing & measurements#

  • Width depends on device and usage.
  • Only the height for the content symbol is free adjustable.

Measurements#

TypesAttributesPreview
Horizontal spacingpadding: 16px
margin: 16px		measurements: padding
Vertical spacingpadding-top: 8px
padding-bottom: 16px		measurements: padding
HeightLG: 48px
MD-XS: 40px		measurements: padding
Sizeicon: 24x24pxmeasurements: padding
Text length ends with ellipsispadding-right: 16pxmeasurements: padding

Spacing#

TypesAttributesPreview
Spacing8px between different components
content opens downwards.		measurements: spacing

What can be modified?#

  • Override the text.
  • Adjust the width.
  • Adjust the height but only for the "content" symbol.
  • Modify the complete look of the symbol but please stick to the colors of the given states.

Our workflow in Sketch#

  • Use the "Overrides"-function to customize your accordion element (i.e. select the correct status you want to display).
  • Place the "content" symbol directly under the accordion to display an open status.

Change log#

5.2.0 Fundamental & 5.2.0 Web - 2021-07-22#

Changed#

  • Doc: "Accordion" | Clean up the documentation for the right structure and sentence case

5.0.1 Fundamental & 5.0.1 Web - 2021-04-19#

Added#

  • Doc: "Accordion" | Added description: Text length ends with ellipsis

5.0.0 Fundamental & 5.0.0 Web - 2021-03-22#

Changed#

  • "Accordion" | Changed symbols: with layer-style settings