Accordions

Overview

Accordions and accordion sets are typically used to:

• Provide information: Share summary content with the ability to get more details.
• Reduce scrolling: Collapse long content to improve page scannability.
• Organize information: Group related content into categories.

Use cases

The accordion is a self-contained component, or molecule. The accordion set is a container with one or more accordions and is referred to in the design system as an organism or AccordionSet.

The accordion component has several variations for specific use cases.

• Accordion components are always part of an accordion set.
• Accordion sets always have at least one accordion.
• In most cases, accordions in an accordion set are homogenous, with a few exceptions.

Small accordion set

The small accordion component always has the following elements:

• Title – Also serves as the heading for the accordion component when expanded.
• Iconography – A chevron icon indicating expand/collapse functionality.
• Expandable Panel – A variety of content that displays when users expand the accordion.
• Image
• Body copy
• Cards
• CTA link

The small accordion set contains one or more accordions and may include an optional independent title, description and link to additional details.

Large accordion set

The large accordion component consists of:

• Numerical Indicator – Displays a count (e.g., number of items within the accordion set).
• Title – Defines or categorizes the information displayed when the accordion is expanded.
• Chevron Icon – Indicates expand/collapse functionality.
• Expandable Panel – Content that displays when users expand the accordion.
• Informative text - Unlinked text relevant to the category title for the accordion.
• CTA links – Specifies links to pages that are related to the category title for the accordion.
• Note that accordion elements may be holistic or a combination of informative text and CTA links.
• Optional unique accordion set CTA link - For the user to view more options related to this accordion category.

The large accordion set contains one or more accordions and may include an optional independent title, description and link to additional details.

Location accordion set

The location accordion component consists of the following elements:

• Title – Location name
• Address - Address of location
• Chevron Icon – Indicates expand/collapse functionality.
• Expandable Panel – Each panel represents a location that users can expand to reveal additional details.
• Location Details – Includes the facility name, address, and external link to location details.
• Contact Information – Displays the phone number as a clickable element for direct dialing.
• Service Tags – Indicates available amenities such as WiFi, pharmacy, or virtual care.
• CTA Button – Provides a “View location” button leading to more details.
• Image or Map Preview – Displays either an image of the facility or an interactive map.

The location accordion set contains one or more accordions and may include an optional independent title, description, optional subheadings to break up groupings of accordions and a link to additional details.

Interaction

• Clicking on a collapsed panel expands the content and rotates the chevron icon upward.
• Clicking on an expanded panel collapses the content and rotates the chevron icon downward.
• Only one accordion panel can be expanded at a time in certain implementations.

States

• Expanded: Content is fully visible, and the chevron icon points up.
• Collapsed: Content is hidden, and the chevron icon points down.

Customizable  elements

This component offers a flexible structure, allowing for customization of content. The layout supports a variety of elements that can be toggled on or off to create a tailored experience. Below are the key components of the design.

Small Accordion

Large Accordion

Location Accordion

Guidelines (do’s and don’ts)

Do

• Use clear and concise headings for each accordion item.
• Maintain a consistent unexpanded layout when using multiple accordions in a set. The expanded accordions may or may not have consistent content.
• Use numerical indicators when relevant to highlight groupings.
• Ensure chevron icons clearly indicate interactivity.

Don't

• Overuse accordion elements, especially for short content that does not require collapsing.
• Display all accordion panels expanded by default, as it defeats the purpose of the component.
• Remove numerical indicators if they add valuable context to the content.

Last updated