An accordion is an expandable component that contains nested elements inside. They are used as a logical method of grouping related components while reducing the required amount of scrolling.


🖥 Desktop
Accordion: Level 1 (Closed)
- 24px padding
- 16px border-radius
- <h4> IBM Plex Sans Regular
- chevron--down icon 24x24px
- 16px space
- 16px bottom-margin
- Flexible width - max 12 columns, min 4 columns
Accordion: Level 2 (Closed)
- 1px border [eo-border-default]
- 12px border-radius
- <h5> IBM Plex Sans Regular
- 16px bottom-margin
- 100% width to padding of level 1
Accordion: Level 1 & 2 (Open)
- 32px bottom margin for level 1 title
- 16px bottom-margin for closed level 2.
- 32px bottom-margin for level 2 title.
- 16px bottom-margin for open level 2.
- 48px bottom margin for last element.
📱 Mobile
Accordion: Level 1 (Closed)
- 1px border-top
- 16px space
- padding 24px, 16px, 24px, 16px
- <h5>
- chevron--down icon 24x24px
- 1px border-bottom
- 100vw
Accordion: Level 2 (Closed)
- 32px bottom margin for level 1 title
- 12px bottom-margin for closed level 2.
- 32px bottom-margin for level 2 title.
- 48px padding-bottom for open level 2.
- 12px bottom-margin for open level 2.
- 48px padding-bottom for open level 1.