If you have content or information that you would like to be in the page but that is quite lengthy, or doesn't necessarily apply to all readers of the page, then you can add it as an accordion so that the user can expand the section(s) relevant to them.


Accordions will always pick up the theme colour of the site. Ensure that your theme colour works with white text.

When to use the accordion

The accordion should only be added into a page when it contains information relevant to the page.

All items in the accordion should be related so that you can add a heading above the accordion which summarises what information you will find below.

You can also make use of the accordion if you have information that you'd like to add into more than one page, as you create the accordion list centrally and then add it into the pages required by adding in the accordion web part.

How to format content in the accordion

Headings on the accordion items should be in sentence case.

As each of these headings is tagged <H3>, all content within an accordion item should be formatted without <H3> or <H2> so that the content will be structured correctly.

You can use other content items such as calls-to-action, tables, etc within the accordion items.