A vertically stacked list of items. Each item can be expanded to reveal the content within.


Category: Tabs and lists

Here is a working example of an Accordion. Its appearance will change in response to the size of your screen.

Accordion number 1

Text goes here.

Accordion number 2

More text goes here.

Usage guidelines

  • Use to display FAQ-style content.
  • Accordions are always closed by default.
  • Users can expand multiple panels at the same time.
  • Each panel requires a title and body as a minimum, but more components such as Image (Landscape) and videos can be placed inside.


  • Place in the Body Content.

Editing and customisation

  • You can edit the title (text) and body (rich text) fields.
  • You can add other components, such as Image (Landscape) and videos.
  • You cannot change the colours of this component.

The following components can be added inside Accordion:

Other information

  • We plan to replace the orange background on the title bars with a grey background.

Related components

Side Content Date Range
Example of "Side date range".
Side Content Date Range
More details
Example of "Date".
More details
Example of "Tab".
More details
Content List
Example of "Content list".
Content List
More details
Back to top