Accordion
Accordions are used to toggle the visibility of content.
- Can contain leading or trailing indicator icons
- Two sizes: small and large
- Keep headings concise and short
- Content should be concise and scannable
Examples
Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.
Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)
This is the content
This is the content for the second item
Dynamic Content Example
An accordion can change size based on the content inside of it. This is a dynamic example.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Can contain leading or trailing indicator icons
- Two sizes: small and large
- Keep headings concise and short
- Content should be concise and scannable
Examples
Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.
Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)
This is the content
This is the content for the second item
Dynamic Content Example
An accordion can change size based on the content inside of it. This is a dynamic example.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Can contain leading or trailing indicator icons
- Two sizes: small and large
- Keep headings concise and short
- Content should be concise and scannable
Examples
Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.
Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)
This is the content
This is the content for the second item
Dynamic Content Example
An accordion can change size based on the content inside of it. This is a dynamic example.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Can contain leading or trailing indicator icons
- Two sizes: small and large
- Keep headings concise and short
- Content should be concise and scannable
Examples
Cerberus is a three-headed dog from Greek mythology who guards the gates of the underworld, Hades, and prevents the living from entering.
Cerberus is located in multiple places, including in Greek mythology, in the game Fortnite, and in the game Hades (1 and 2)
This is the content
This is the content for the second item
Dynamic Content Example
An accordion can change size based on the content inside of it. This is a dynamic example.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |