Anatomy
|
Item |
Name |
Description |
Optional |
|---|---|---|---|
|
1 |
Header |
The clickable area that expands or collapses the content. |
|
|
2 |
Title |
A word or short phrase representing the content. |
|
|
3 |
Description |
A brief summary or additional context that complements the Title. |
Yes |
|
4 |
Arrow |
Indicates the current state (expanded or collapsed), pointing in the direction of content expansion. |
|
|
5 |
Content |
The area that contains the content inside the Accorrdion, shown or hidden based on the user's interaction. |
|
|
6 |
End Slot |
An optional slot that complements the context of the Accordion. It can be used with visual assets or actions and is commonly combined with the left arrow. |
Yes |
|
7 |
Divider |
A line used when there are multiple Accordions stacked in the layout, making it easier to identify them. |
Yes |
|
8 |
Start Slot |
An optional visual asset that complements the Accordion’s context. Commonly used with the right arrow position. |
Yes |
Specification and properties
Arrow position
The arrow can be placed on the left or right side of the header.
|
Item |
Variant |
Description |
|---|---|---|
|
1 |
Left |
The default position. It displays the arrow on the left side. |
|
2 |
Right |
The alternative position. It displays the arrow on the right side. It can be combined with the Start Slot for better visual balance. |
Expanded
Property that controls whether the Accordion is expanded or collapsed.
|
Item |
Value |
Description |
|---|---|---|
|
1 |
False |
The Accordion is collapsed, and the content is hidden. |
|
2 |
True |
The Accordion is expanded, and the content is visible. |
Spacing
The Accordion comes with a pre-set padding, which can be adjusted as long as our spacing tokens are used.
- In Figma, this must be manually set for the Header and Content layers
- In code, there are dedicated properties for spacing adjustments.
