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.
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.
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.
Accordion – Alternate Background, Full Width
Accordion on an alternate background at full width.
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.
Yes. Each Accordion item supports rich text, images, link lists, videos, and card grids within its content area.
Accordion – Brand Background, Full Width
Accordion on the brand (yellow) background at full width.
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.
Yes. The Accordion follows ARIA best practices, using aria-expanded and aria-controls attributes to communicate state to assistive technologies.
Accordion – Accent Background, Full Width
Accordion on the accent background at full width.
Can I add a button to the Accordion section?Yes. The Accordion section supports an optional button link below the section text, which can point to an internal page or external URL.
The accent background is used to visually highlight a section and draw attention to important content on the page.
Accordion – Default Background, Narrow Width
Accordion at narrow (small) width, centred on the page. Useful for focused content like FAQs.
What does narrow width mean?Narrow width constrains the content to a smaller column, improving readability for text-heavy sections.
Use narrow width for FAQ sections, legal text, or any content that benefits from a more focused, readable column.
Accordion – Alternate Background, Narrow Width
Accordion on an alternate background at narrow width.
Can I combine background and width variants?Yes. All background variants and width options can be freely combined to achieve the desired visual result.
On mobile, the narrow width behaves like full width since the viewport is already small. The constraint only applies on larger screens.
Accordion – Multiple Items Open
This variant allows multiple Accordion items to be open simultaneously. Useful when users need to compare content across items.
First item – open by defaultThis item is open when the page loads. With multiple mode enabled, opening another item will not close this one.
This item is also open on page load, demonstrating that multiple items can be expanded at the same time.
This item starts collapsed. Clicking it will open it without affecting the other open items.