An accordion allows the user to find out more information around a particular subject/question

An example of our accordion component
When to use

The accordion component allows the user to interactive with the content to learn more information from the same screen. It is typically used where we have a lot of content such a Frequently Asked Questions.

The accordion component in its default state
The accordion component in its active state

To get the best use from the accordion component, these rules should be followed:

  • Use short and precise titles/questions

  • Keep answers informative, but small enough that they are easy to digest for the user

  • Hyperlinks can be added to the secondary copy for users to find out more information.