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.

Text goes here.

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

More details
More details
Side Content Help
More details
Logo List
More details
Back to top