Skip to main content Red Hat Design System logo Contribute on Github

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

Anatomy of an accordion with lots of annotations pointing to various parts
  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

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

Light theme accordion with an expanded panel

Dark theme

Dark theme accordion with an expanded panel

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.

Accordion panel with two tags in inline accent slot and an accordion with two tags below the title

Nested panels

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

An accordion with an expanded panel and a nested expanded panel

Stacked panels

Multiple panels can be expanded simultaneously even when nested.

An accordion with one collapsed panel on top and two stacked expanded panels below

Space

Accordion spacing within panels and in between elements like titles, body text, rules, and icons
Example Token Description
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer
48 --rh-space-3xl 48px spacer

Interaction states

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

Hover

Light theme accordion with a hover state Dark theme accordion with a hover state
Property Light theme Dark theme
Color - panel header #F2F2F2 #292929

Focus

Light theme accordion with a focus state Dark theme accordion with a focus state
Property Light theme Dark theme
Color - panel header #F2F2F2 #292929
Color - focus ring #0066CC #73BCF7

Active

Light theme accordion with an active state Dark theme accordion with an active state
Property Light theme Dark theme
Color - panel header #F2F2F2 #292929
© 2021-2024 Red Hat, Inc. Deploys by Netlify