Accordion

A set of headings, vertically stacked, that each reveal an related section of content.

Documented

The component is fully documented

Figma component

Includes a link to a Figma component that has been imported to Supernova

Open in Figma

Status

The component has a health status indicated

Healthy

Overview

Vertically stacked expandable, collapsed items. Often used for FAQ.

Accordion Preview

Usage

Utilize the accordion component to compartmentalize extensive content into digestible sections, particularly when the content exceeds the visible area of the interface.

Craft succinct and informative headers for each accordion section to facilitate quick comprehension and navigation for users.

Don’t embed accordions within other accordions to prevent complexity and ensure a streamlined user experience.

Variants

Accordion Variants