Accordion

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Overview
  2. Status
  3. Sample element
  4. When to use
  5. Status checklist
  1. Overview
  2. Status
  3. Sample element
  4. When to use
  5. Status checklist

Overview

An accordion is a stacked list of panels which allows users to expand or collapse information when selected. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.

Status

Sample element

Item One Item Two Item Three

When to use

  • When space is at a premium and content cannot be displayed all at once
  • When you need to condense a large amount of related information into sections
  • When you need a way for users to read or compare sections of content simultaneously

Status checklist

Edit this page on GitHub