C01 Accordion

An accordion is a vertically stacked list of items that can expand and collapse to reveal or hide content. It helps organize information efficiently, reducing visual clutter while allowing users to access details as needed.
 

Component requirements

Component consists of a wrapper element, along with individual accordion items.

Accordion wrapper

Required:

• Title: Text field. 
• Title type: Dropdown. Providers user ability to choose how title is styled. H2/H3/H4/P. Default: P
• Title icon: Dropdown. Allows users to choose icon they would like to include.

Optional:

• Title alignment: Left/ Center. Default: Left
• Icon placement: Left/Center of title. Default: left
• Top support copy: Rich text field. Allows users to add content which would appear below the title and above the accordion.
• Bottom support copy: Rich text field. Allows users to add content which would appear below the accordion.
• Open First Item: Sets first accordion item to be expanded. Default: unchecked. 
• Limit to Single item: Only one accordion item can be expanded at a time. Default unchecked.

Accordion items

Required:

• Panel Title: Clickable element that expands or collapses an accordion panel.
• Panel Body copy: Rich text field

Additional component notes:

• Each accordion item is treated as a new component item
• Icon indicators (+/-) are used to indicate if the accordion item is closed or open
• Accordions have a built-in functionality that allows to anchor directly into accordion content

Content guidelines

Lorem ipsum
Lorem ipsum

ADA requirements

Use aria-controls to link an accordion button to its corresponding content, ensuring proper accessibility.
​Each button should have a unique id referenced in aria-controls, associating it with the content it controls.
​Avoid manually setting 'hidden' display properties on content areas to ensure visibility if JavaScript fails to load.

Component examples

Example #1: Title (left), Top support copy, Bottom support copy enabled. First item open unchecked. Limit to single item unchecked.

Example #2: Title and Icon enabled (center). Top and Bottom support copy disabled. First item open checked. Limit to single item checked.