Vivid Logo Vivid

Accordion

Accordion is an interactive element that works alongside Accordion Item to organise and display content in a collapsible and expandable way.

Alternative Expanded Indicators

The example below uses the icon and icon-trailing attributes to replace the chevron indicators with plus and minus icons.

Single Accordion Items

The example below shows how a single Accordion Item can be used inside an Action Group component (which provides the border) to create a stand alone expandable section of content.