Accordions are effective when you have a lot of content to display and you can group some of that information.
By default, accordions should be collapsed (only the accordion headline is visible) and accordion content is only visible after a user action.
Accordion component being used in a FAQs section
The accordion component delivers large amounts of content in a small space through progressive disclosure.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Accordion |
Used for grouping large pieces of information of the same type. |
Inside any layout container |
Toggle between expanded/collapsed on click |
Anatomy
Structure
|
1. accordion item2. accordion header3. headline4. icon5. accordion content |
|
accordion item |
Refers to one section in an accordion composed of several items. It comprises the accordion header and the accordion content. |
|
accordion header |
It's the container that groups both the headline and the icon. It's the only element of the accordion item that is always visible, no matter the expansion state of the accordion item. |
|
headline |
The headline gives the user a high-level overview of the accordion content allowing the user to decide which sections to read. |
|
icon |
Indicates if the accordion item is expanded or collapsed. If the content is expanded, the icon will be chevron-up. If the content is collapsed, the icon will be chevron-down. |
|
accordion content |
The section of content of the accordion item that's only displayed if the accordion item is expanded. |
Sizes and Spaces
|
Sizes vary from m to xxl. Each size corresponds to a set of paddings and a specific height. These values are fixed according to the chosen size, no matter the context or content.
The paddings in the m and l accordion headers are 8px.
The paddings in the xl and xxl accordion headers are 16px. |
|
The paddings in the m and l accordion content are 8px.
The paddings in the xl and xxl accordion content are 16px. |
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Size |
m l xl xxl |
The controls the height and paddings of the elements inside the accordion item. |
|
Style |
white support20 |
The style changes the background colour of the entire item. |
|
State |
default hover |
--- |
|
Expanded |
true false |
If true, the accordion content is visible. If false, the accordion content is hidden. |
Behaviour
Interaction
Interaction on a m accordion item.
The entire accordion header is clickable. This means that when the user clicks anywhere in the accordion header, the accordion item will expand or collapse and change the accordion content's visibility state.
Responsiveness
Accordion item adapting to a change in the layout's width.
The headline adapts to the width of the container. When there is text wrap, the headline is centred vertically with the text.
Guidelines
|
|