Home

Interface design: Accordion

Standard accordion and stepper accordions are available for collapsed non-sequential and sequence lists.

Accordion variations

Standard and stepper accordions have three display settings:

All closed.
First open.
All open.

Standard accordion

This item is expanded
It also has a call to action button.

Optional button
This item is closed
This is an unordered list inside an accordion:

Item one.

Item two.

This is an ordered list inside an accordion:

Item one.

Item two.
This item has an image inside it
Accordions have WYSWYG options like images, bold and italics.

Stepper accordion example

This item is expanded
It also has a call to action button.

Optional button
This item is closed
This is an unordered list inside an accordion:

Item one.

Item two.

This is an ordered list inside an accordion:

Item one.

Item two.
This item has an image inside it
Accordions have WYSWYG options like images, bold and italics.

Zeplin examples