Design system
Accordion
Last updated 15 January 2026
Just like the famous instrument, the Accordion component is a set of vertical tabs that opens up upon click to reveal more details. The Insites component specifically offers custom modes such as Nesting (item under items), items opening up in new tabs, and many more!
Requirements
To use these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of the component.
Figma Component Variant Properties
Accordion Item
| Properties | Options | Notes |
|---|---|---|
| Open | True False | Toggle to select if the accordion is opened or closed. |
| Hover | True, False | Toggle to enable the hover state for the component. |
| Show Default Heading | True, False | Toggle to show or hide the default heading for the component. |
| Show Heading Icon | True, False | Toggle to show or hide the icon in the default heading for the component. |
| Show HTML Heading | True, False | Toggle to show the custom content placeholder for the component. |
Accordion Link
| Properties | Options | Notes |
|---|---|---|
| Active | True, False | Toggle to enable the active state of the component. |
| Hover | True, False | Toggle to enable the hover state for the component. |
| Show Icon | True, False | Toggle to show the icon for the label. |
Accordion Menu Link
| Properties | Options | Notes |
|---|---|---|
| Open | True, False | Toggle to select if the accordion is opened or closed. |
| Hover | True, False | Toggle to enable the hover state for the component. |
| Show Heading Icon | True, False | Toggle to show the icon for the label. |