Skip to main navigationSkip to main content
Return to Sky UI homepage

Accordion - Overview

View on FigmaView on GitHub

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 -

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

  1. Container

    The container provides a background wrapper for other content items.

  2. Title

    This is used to indicate the subject of the Accordion.

  3. Icon Button

    Indicates whether the Accordion is in the open or closed state.

  4. Thumbnail (optional)

    Option to show a thumbnail/icon related to the Accordion title.

  5. Content area

    The main content area for the Accordion.

Variants & States

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

Content area
Bordered, HoverDrop Shadow, Focus