Accordions enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user.


Accordions can be used to group and hide content to keep an interface clean and reduce clutter. Accordions can be used to display only one or multiple panels at a time, depending on the use case.

Accordion anatomy
  1. Accordion Item
  2. Label
  3. Chevron
  4. Accordion Panel

Accordions can be subtle or bold depending on how prominently they should be displayed.

Accordion Appearance

Accordions have four styled states available — enabled, hover, focus and disabled.

Accordion states

An expanded accordion item reveals an accordion panel with additional content. The panel is expanded and collapsed with a slide animation.

Accordion states

A leading icon can be added before the title in an accordion item.

Note: A leading icon can be achieved through custom overrides in UI Toolkit and we are working towards releasing this property in a future version of UI Toolkit.

Accordion icon

Accordions can be displayed in large, medium and small sizes.

accordion sizes

Accordion panels can have a variety of content types added into them. Some custom layout examples are shown below.

Accordion status
Alt Text

Summary accordions shows basic information in its collapsed state and more details when expanded.

Alt Text
  • Make the entire title label area clickable to trigger expansion.
  • Ideal for use when you have no more than 10 modules of content.
  • Do not use if it is a priority to have your users see all content at once.