Accordion
The Accordion component allows you to display a list of items. Each item can be expanded and collapsed to reveal and hide the content associated with that item.
Body. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Body. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Body. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- List item 1
- List item 2
- List item 3
When to use
We often want to ensure that our pages are easy to skim and digest information at a high level. Users don't have a long attention span so we don't want to display dense content that could put them off. However, this content still has a place and will be key for certain users who want to dig into the details. Accordions allow us to do this by putting some of the detailed or dense content within them.
How to use
You can have as many items as you want in an accordion. Within an expanded accordion item you can display a range of content - text, tables, images etc.
Additional considerations
- Maximum title length: 120 characters
CMS name
- Content: Accordion (Default style)
Example
See this component in use:
Frequently asked questions
Speak Up
