Accordion

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

Overview

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.

Placement

  • 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 Help
Example of "Side help".
Side Content Help
More details
Content List
Example of "Content list".
Content List
More details
Campaign Info Panel
Example of "Campaign info panel".
Campaign Info Panel
More details
Quote
Example of "Quote".
Quote
More details
Back to top