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 symbol has rounded corners with a 2px radius.
• The default/hover/focus state uses "arrow-down" and the open state use "arrow-up" as an icon.

States	Attributes	Preview
Default	text-color: gray-darker outline-color: gray-base icon-color: gray-darker background-color: basic-white
Hover	text-color: gray-darker outline-color: brand-primary-base icon-color: gray-darker background-color: basic-white
Focus	text-color: brand-primary-base outline-color: brand-primary-base icon-color: gray-darker background-color: basic-white
Opened	text-color: brand-primary-base outline-color: brand-primary-base icon-color: gray-darker background-color: basic-white
Disabled	text-color: gray-base outline-color: gray-light icon-color: gray-base background-color: gray-background

Content#

• The symbol has rounded corners with a 2px radius on the lower-left and -right corner.

States	Attributes	Preview
Opened	outline-color: brand-primary-base background-color: basic-white

Spacing & measurements#

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

Measurements#

Types	Attributes	Preview
Horizontal spacing	padding: 16px margin: 16px
Vertical spacing	padding-top: 8px padding-bottom: 16px
Height	LG: 48px MD-XS: 40px
Size	icon: 24x24px
Text length ends with ellipsis	padding-right: 16px

Spacing#

Types	Attributes	Preview
Spacing	8px between different components content opens downwards

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#

10.0.0 Fundamental & 10.0.0 Web - 2022-05-30#

Changed#

• Sketch: "Accordion" | Adjusted to new grid settings

9.0.0 Fundamental & 9.0.0 Web - 2022-05-03#

Changed#

• Sketch: "Accordion" | Adapted component to new grid settings

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

Changed#

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

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

Added#

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

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

Changed#

• "Accordion" | Changed symbols: with radius symbol and layer styles
• "Accordion" | Changed symbols: with layer-style settings

5.4.0 Fundamental & 5.4.0 Web - 2020-10-22#

Fixed#

• "Accordion" | Fixed symbols & description: wrong icon description for hover state

4.2.0 Core & 4.2.0 Web - 2020-01-16#

Added#

• "Accordion" | Added symbols and description (MD-XS)