Accordions are components that allow sections of content to be vertically displayed on a page. The header for each section controls if that content is expanded or collapsed.

Key Points

  • Every accordion should have a clear header that identifies what content is collapsed and hidden
  • Accordions can have one or no accordion content open on first page load
  • Accordions should be able to be opened by default if they are triggered by a deep link


The accordion component makes it possible to display large amounts of content in a small space through controlled disclosure. Whilst this adds an extra click to the user finding content it keeps related content together and the header will provide key navigation.


Card and Accordion

Card and Accordion

Example of an accordion nested inside an card

Accordions can be placed on a page or inside other components such as a card. Be aware that the overall height of the page or container will change depending on the section(s) which are opened.

Accordion on a Page

Accordion on a Page

Example of an accordion on a page background


To keep content related within their container the following two changes happen:

  • When the accordion is open the arrow icon points up, the icon down when collapsed
  • The divider line stays at the bottom of each section when expanded, this differentiates each section

The whole header section should be tappable to trigger the expance/collapse action.