Accordion
An accordion groups sections of related content that can be opened and closed.
Breakdown
The accordion component has a max width of 650px. By default an accordion is closed and accordions automatically close when another is opened.
-
Content Example 1
-
Content Example 2
-
Content Example 3
Usage
Accordions let people choose which sections of content they want to access like questions in an FAQ. Accordions are often used as secondary content, never put information that's required for the current task inside an accordion.
An accordion header should give an idea of the content in the accordion panel. Keep headers short and to the point.
Anatomy
Vertical padding
Accordions have a vertical padding of 9px. This does not change when in it’s open state.
Horizonal padding
Accordions have a horizontal padding of 18px. This does not change when in it’s open state.
Horizonal gap
Accordions use a horizontal gap of 9px between the icon and it’s text counterpart.
Stack spacing
Accordions within a stack use a spacing of 13.5px.
Accessibility
Accordion headers have a button role that makes them perceivable to assistive technologies. When an accordion item is expanded and active, it’s properties should be set to true.
