There are a number of ways that you are able to configure the Accordion block. Below you can find some examples of how that may look like. Each of these examples use the exact same text content.

Example 1

In this example the header text is left-aligned, the indicator button is an arrow on the right, and the first accordion item is visible by default.

Example 2

In this example the header text is center-aligned, the indicator button is a plus sign on the left, and all accordion items are visible by default. There is also more space configured between items.


Example 3

Here, the header text is center-aligned, the indicator button is an arrow on the left, and only one accordion item is hidden by default. There are also different colours selected for the visible and hidden accordion items, a slight border and more space configured between items. 

Example 4

In this example, the accordion is set to use two columns. You can select the number of columns under the Preferences tab.