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

  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

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

  4. Content area

    The main content area for the Accordion.

Variants & States

  • Styles: Default, Bordered, Drop Shadow
  • States: Default, Hover, Focus
  • Open or closed
ClosedOpenDefaultBordered
Drop Shadow