Accordion

An accordion is a graphical interface component comprising a series of panels, each displaying information or options.

Modifiers

Below are cases where the accordion uses all basic functions (e.g. opening and closing) but the packaging and contents within it are different.

Base

Anatomy

Base/Anatomy
  1. Chevron: Indicates whether the item is open or closed.
  2. Icon: Space for an icon
  3. Title: Contains the section title and is controlled for revealing the item.
  4. Used filter: Indicates the number of used filters that the accordion body contains
  5. Badge: Place for status/propagation badge. Detailed description can be found here
  6. Counter: Use in case you need to show the number of items inside
  7. Actions: Reserved space for events. There can be, for example, a trigger that opens dropdown, search, add action, etc.

Sizes

The size of the application depends on the case. We do not recommend combining 2 sizes together for example in nested cases like menus etc.

Base/Sizes

Truncation

The name is always displayed on one line. If it is shortened then show the tooltip on the right so that it does not overlap the content above or below.

Base/Truncation

Dimensions

Base/Dimensions