Berlin - Components | Accordion

"Accordion" is a component that groups contents in a drop-down menu. 

This component is added within the screens by default. (See here) and pop-ups (See here), it can also be added inside a row or a pop-up.
You will find this component in the group of "Cataloguer" components.

When creating the "Accordion" component, three "Accordion items" (A)  

are included by default. Each "Accordion item" is organised in two areas:

  • A title.
  • A content area including a sample text. We can include more components within this area.

This component has a complex structure, as it consists of many items with their own specific properties. When configuring this component, we should pay attention and select the right item. We can select items from the breadcrumb trail and from the "Structure" tab.

Breadcrumb trail

"Structure" tab

Setup process

1. When creating this component, three elements are included by default. We can add new "Accordion items" to the "Add" tab, if required.

2. Go to the "Properties" tab and configure the parameters of the accordion.

3. Write a title for each item included in the accordion.

4. Select the content area within the "Accordion item" and configure its content. A sample text is added by default, but we can add other components from the "Add" tab.

Accordion properties




This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default, but size can be reduced to other preset percentages or can be displayed in "full-size". Some quote styles may overlap the central column if "Full" width is chosen.


This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.