Accordion

Important Terminology

A default accordion is called a level 1 accordion.

A nested accordion is called a level 2 accordion.

Follow these rules when using accordions in your designs:

Only use accordions if there a need to have more than 1!

A single accordion does not benefit the user much and should instead be an inline tile with all of its contents visible.

An accordion is styled in its own tile (this is called a level 1 accordion).

Multiple level 1 accordions can appear as separate tiles on a screen (group accordions logically)

A level 1 accordion can contain multiple level 2 (nested) accordions.

Level 2 accordions can not have any nested accordions. There is NO Level 3.

There is a max number of 50 accordions. If you need to use more consider restructuring.

DO -> Use short and concise button labels to indicate the action to the user

DON'T -> Use long or indirect sentences to indicate an action