This page showcases every available variant of the Accordion component, covering all background colours, width options, and the multiple-open behaviour.
Accordion – Default Background, Full Width
Standard accordion on a default background at full width. Only one item can be open at a time.
Accordion – Alternate Background, Full Width
Accordion on an alternate background at full width.
Accordion – Brand Background, Full Width
Accordion on the brand (yellow) background at full width.
Accordion – Accent Background, Full Width
Accordion on the accent background at full width.
Accordion – Default Background, Narrow Width
Accordion at narrow (small) width, centred on the page. Useful for focused content like FAQs.
Accordion – Alternate Background, Narrow Width
Accordion on an alternate background at narrow width.
Accordion – Multiple Items Open
This variant allows multiple Accordion items to be open simultaneously. Useful when users need to compare content across items.
What is the Accordion component?
The Accordion component displays a list of collapsible items. Each item has a title and expandable content area, making it ideal for FAQs and structured information.
When should I use an Accordion?
Use an Accordion when you have multiple sections of content that users may not all need to read, helping to reduce page length and cognitive load.
How many items can an Accordion have?
There is no strict maximum, but for usability it is recommended to keep the number of items manageable. Too many items can overwhelm users.
Can Accordion items contain rich content?
Yes. Each Accordion item supports rich text, images, link lists, videos, and card grids within its content area.
What heading level should I choose?
Choose the heading level that fits the document outline of your page. H3 is the default and works for most cases where the section title is an H2.
Is the Accordion accessible?
Yes. The Accordion follows ARIA best practices, using aria-expanded and aria-controls attributes to communicate state to assistive technologies.
Accordion – All Variants
This page showcases every available variant of the Accordion component, covering all background colours, width options, and the multiple-open behaviour.
Accordion – Default Background, Full Width
Standard accordion on a default background at full width. Only one item can be open at a time.
Accordion – Alternate Background, Full Width
Accordion on an alternate background at full width.
Accordion – Brand Background, Full Width
Accordion on the brand (yellow) background at full width.
Accordion – Accent Background, Full Width
Accordion on the accent background at full width.
Accordion – Default Background, Narrow Width
Accordion at narrow (small) width, centred on the page. Useful for focused content like FAQs.
Accordion – Alternate Background, Narrow Width
Accordion on an alternate background at narrow width.
Accordion – Multiple Items Open
This variant allows multiple Accordion items to be open simultaneously. Useful when users need to compare content across items.
The Accordion component displays a list of collapsible items. Each item has a title and expandable content area, making it ideal for FAQs and structured information.
When should I use an Accordion?
Use an Accordion when you have multiple sections of content that users may not all need to read, helping to reduce page length and cognitive load.
How many items can an Accordion have?
There is no strict maximum, but for usability it is recommended to keep the number of items manageable. Too many items can overwhelm users.
Can Accordion items contain rich content?
Yes. Each Accordion item supports rich text, images, link lists, videos, and card grids within its content area.
What heading level should I choose?
Choose the heading level that fits the document outline of your page. H3 is the default and works for most cases where the section title is an H2.
Is the Accordion accessible?
Yes. The Accordion follows ARIA best practices, using aria-expanded and aria-controls attributes to communicate state to assistive technologies.
