An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
Accordions delivers large amounts of content in a small space through progressive disclosure. The header title give the user a high level overview of the content, allowing the user to decide which sections to read. Accordions can make information processing and discovering more effective, but they do hide content from users.
Color
| Element | Property | Color token |
|---|
| Title | color | $text-primary |
| Content | color | $text-primary |
| Icon | fill | $icon-primary |
| Header | border-top | $border-subtle-01 |
| | background | Transparent |
| Panel | border-bottom | $border-subtle-01 |
| | background | Transparent |
Typography
| Element | Font-size (px/rem) | Font-weight | Type token |
|---|
| Title | 18 / 1.125 | Semibold / 600 | $title-01 |
| Content | 18 / 1.125 | Regular / 400 | $body-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Item | border-top | 1px | – |
| Title | margin-left | 16 / 1 | $spacing-05 |
| Panel | padding-top | 8 / .5 | $spacing-03 |
| | padding-bottom | 24 / 1.5 | $spacing-06 |
| | padding-right | 16 / 1 | $spacing-05 |
| | padding-left | 48 / 3 | $spacing-09 |
| Icon | size | 16 / 1 | – |
| | padding-right | 16 / 1 | $spacing-05 |
