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:
- first accordion item open
- all accordion items open
- all accordion items closed
The accordion section heading can alternate between H2 and H3.
Accordions have rich text (WYSIWYG) functionality and can contain images and CTA's. Other components are not able to be embedded in accordion items.
Standard accordion
Example of first item open
- This item is open
It also has a call to action button.
- This item is closed (open me!)
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
The stepper accordion should only be used when items follow a sequence.
Example of first item open
It also has a call to action button.
This is an unordered list inside an accordion:
- Item one.
- Item two.
This is an ordered list inside an accordion:
- Item one.
- Item two.
Accordions have WYSWYG options like images, bold and italics.