---
title: Accordions
tags: Kickoff top10
---
# Accordions
An accordion is a vertically stacked set of interactive branches. Each branch works as controls that enable users to reveal or hide their associated content.

Accordions are commonly used to reduce the need to scroll when presenting multiple contents on a single page.

## Types

Though there is not really several types of accordions, the asset is available both in dark and light theme.

Users can only open one branch at a time.

### States
1. **Collapsed**
Basic state of a branch, displaying only its label and chevron pointing to the bottom.

2. **Opened**
State visible when clicked. The branch opens, allowing the content inside to be displayed. The look of the label changes in order for the user to clearly identify which item in the list is openned. Also, the chevron is changin its direction to point to the top.

3. **Hover**
State visible when the cursor hovers the label and chevron. They are displayed in another color. Cursor becomes a pointer.

4. **Focused**
State visible when users select the branch via tab key. Label and chevron are highlighted separatly.

### Anatomy
1. **Branch**
Branch is the full element with label, chevron, separator and content.

3. **Label**
Allows the users to get the key details about the underlying content of the accordion branch.

2. **Chevron**
Informs the user about the state of the accordion. Pointing down, the content is collapsed. Pointing up, the content is expanded.

3. **Separator**
Visual indicator between two elements of the accordion.

4. **Content**
When opened, the item shows its content.

> **WARNING** Putting an expand/collapse behaviour inside of an accordion item is not considered as a good UX practise.

## Style

| | Attribute | Value |
| -------- | -------- | -------- |
| 1. Padding | | 2rem |
| 2. Label | Weight, font size, color | Regular, size 5, black |
| 3. Separator | Size , color , opacity | 1px, grey4 |
| 4. Label active | Weight, font size, color | Bold, size 5, purple|
| 5. Content text | Weight, font size, color |Regular, size 4, black |
| 6. Content padding bottom | | 4rem |
| 7. Chevron | Size, color | size 3, purple |

### Dark theme

| | Value |
| -------- | -------- |
| 1. Label | white |
| 2. Separator | white 20% |
| 3. Content text | white |
| 4. Chevron | white |