Accordion

Working in progress

This component is still under development. It is not yet available in releases of Atlas.

An Accordion is an expandable and collapsible section of content, often featured in a vertically stacked list with other Accordions. Accordions are commonly used to organize content into collapsed sections, making the interface easier to navigate.

Overview

When to use accordion

Use the Accordion component when you need to organize blocks of content into sections. Avoid using an Accordion when the user needs to read the content by default. In this case, use another component or group of elements instead. Expanded Accordion content can be as long as needed, and the type of content can vary contextually. Headings should be used to label each section of content.

About Accordion

Accordion includes the following elements.

Title

The title or label provides a brief description of the Accordion's content. Pressing on this section expands or collapses the Accordion.

• Do: Customize the title to other styles by applying any of the existing fonts, text sizes or formats defined in our font design tokens.
• Do: Always make sure to emphasize the label more prominently than the expanded content.
• Don't: Avoid customizing the label color as it may lead to contrast issues with the various states of the Accordion.
• Don't: Avoid combining different text styles within the labels of the same Accordion group.
• Don't: Avoid including links in the Accordion label.

Content

The expanded content within the Accordion can include paragraph text, links, images, videos, tables, or form items. There are no restrictions on the minimum or maximum amount of content that can be included in the expanded section.

• Do: Use sub-headers to represent different subsections within Accordion content
• Don't: Avoid nesting additional Accordions within an Accordion item to create subsections.

Examples

Basic usage

Keyboard navigation

Key	Function
Tab	It moves the focus to the next interactive element within the Accordion or to the next Accordion in a group.
Shift + Tab	It moves the focus to the previous interactive element within the Accordion or to the previous Accordion in a group.
Enter / Space	It expands and collapses the Accordion content.