Accordion

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.

 

Accordion (Level 1 Collapsed)

Accordion (Level 1 Collapsed)

Accordion (Level 1 Expanded)

Accordion (Level 1 Expanded)

🖥 Desktop

 

Accordion: Level 1 (Closed)

 

  1. 24px padding
  2. 16px border-radius
  3. <h4> IBM Plex Sans Regular
  4. chevron--down icon 24x24px
  5. 16px space
  6. 16px bottom-margin
  7. Flexible width - max 12 columns, min 4 columns

 

 

Accordion: Level 2 (Closed)

  1. 1px border [eo-border-default]
  2. 12px border-radius
  3. <h5> IBM Plex Sans Regular
  4. 16px bottom-margin
  5. 100% width to padding of level 1

 

Accordion: Level 1 & 2 (Open)

  1. 32px bottom margin for level 1 title
  2. 16px bottom-margin for closed level 2.
  3. 32px bottom-margin for level 2 title.
  4. 16px bottom-margin for open level 2.
  5. 48px bottom margin for last element.

 

 


 

📱 Mobile

 

Accordion: Level 1 (Closed)

  1. 1px border-top
  2. 16px space
  3. padding 24px, 16px, 24px, 16px
  4. <h5>
  5. chevron--down icon 24x24px
  6. 1px border-bottom
  7. 100vw

 

 


 

 

Accordion: Level 2 (Closed)

 

  1. 32px bottom margin for level 1 title
  2. 12px bottom-margin for closed level 2.
  3. 32px bottom-margin for level 2 title.
  4. 48px padding-bottom for open level 2.
  5. 12px bottom-margin for open level 2.
  6. 48px padding-bottom for open level 1.