Accordion

Overview Style Guidelines Code Demos Accessibility

Style

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.

Anatomy

Collapsed panel
Expanded panel
Title
Panel header region
Caret
Emphasis
Content
Panel body region
Accent slot

Sizes

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.

A large size accordion with text underneath saying ‘Large size’ and a small size accordion with text underneath saying ‘Small size’

Theme

An accordion is available in both light and dark themes. The light theme expanded panel includes a box shadow, but the dark theme does not.

Light theme

Dark theme

Configuration

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.

How an accordion is constructed showing alignment, space, scrolling, and width details

Accent slot

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.