An Accordion is best used when you need to show an easily scannable list of headings, with more information available to users by clicking on those titles. They work best for FAQs, terms of service, and other content where you need to present shorter pieces of information that can then be expanded upon with a user interaction.

Screenshot of accordion component

An Accordion component consists of a block title, and an unlimited list of accordion items (title and body / text field). The title will be displayed as an h2 heading with an arrow by it, and when clicked it will expand to show the body content.

View Live Component

Restrictions

The Accordion component can be used in the following section layouts

  • One column
  • Two column
  • Three column
  • Four column