Accordion

Accordion panels include title text, a chevron icon, body text, and other content. When a panel is collapsed, only the top and bottom borders are visible. When a panel is expanded, all borders are visible including a thicker left border for emphasis.

1. Collapsed panel
2. Expanded panel
3. Title
4. Panel header region
5. Caret
6. Emphasis
7. Content
8. Panel body region
9. Accent slot

There are two available sizes and the only difference is the title text size. You can use the Small size on large breakpoints, but not the Large size on small breakpoints due to the potential of long title text wrapping to more than two lines.

An accordion is available for both light and dark schemes. The light scheme expanded panel includes a box shadow, but the dark scheme does not.

An expanded panel does not have a maximum height, but it may scroll if constrained by vertical space. The width of an accordion varies based on content and page layout. Title text and icons are horizontally aligned.

The accent slot can be positioned inline or below the panel's title. This can contain tags, badges, or other small elements with secondary information.

Panels can be nested to help organize complex or granular sections of content.

Multiple panels can be expanded simultaneously even when nested.

Interaction states are visual representations used to communicate the status of an element or pattern.