---
title: "Accordion"
canonical: https://sky-ui.cf.sky.com/components/accordion
---

# Accordion

Accordions allow users to expand and collapse pieces of content.

## Purpose

An Accordion is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is an option to shorten long content pages, expose content to users in a progressive manner, and increase user control.

## Anatomy

The Accordion component can be broken down into the following elements -

## Variants & States

- Breakpoint: Mobile, Desktop
- Styles: Default, Bordered, Drop Shadow
- States: Default, Hover, Focus
- Open or closed
- Show thumbnail: Off/On