Red Hat design system

Style

Accordions can be used in light and dark themes. They consist of vertically-stacked panels that are separated by a thin line when collapsed. Every panel contains a section text label and a caret icon that rotates to indicate if a panel is collapsed or expanded. When a panel is expanded, it includes different styling that consists of an active border on the left and a slight drop shadow, also used for a Disclosure.

Theme

Responsive design

Accordions work well when used on both large and small screens.

Breakpoints

Accordions can be used on smaller screens, but the limited screen space makes content taller which might make users scroll more, so be careful about how much content is included.