Accordions
Updated today
The Accordions block renders a full-width stack of collapsible rows, typically used as an FAQ list. Each row is a disclosure: its heading expands the content below it when clicked, and every row starts closed unless you enable its Open by default setting.
In the theme editor, add the Accordion block to a section, then fill it with Accordion row blocks.
Settings
The Accordion block's own settings control the color scheme, content alignment, spacing, and device visibility of the whole accordion.
Setting | Description | Default |
|---|---|---|
Enable color scheme | Turns on the block's color scheme. The scheme applies only when this is enabled and a scheme is chosen. | Off |
Colors | The color scheme applied to the block. | Scheme 1 |
Content alignment on desktop / on mobile | Horizontal alignment of the rows' content. | Left |
Margin top (Desktop) / (Mobile) | Space above the block, from 0 to 34. | 0 |
Hide block on desktop / on mobile | Hides the block on the chosen device. | Off |
The Accordion icon style setting in the theme's color settings controls the expand/collapse icon shown on each row: Top arrow and bottom arrow (the default) or Plus and minus.
Block: Accordion row
Each row is one collapsible item with its own heading and content. Its content area accepts any theme or app block, but a row renders only when its Heading is filled in, and its content shows only when the row contains nested content.
Setting | Description | Default |
|---|---|---|
Heading | The row's clickable heading. Leaving it blank hides the row. | Accordion Heading |
Heading size | Visual size of the heading, from XX-Large down to Body. | H6 |
Heading level | The semantic heading tag used for the row, Heading 1 to Heading 6. It is independent of the visual size. | H3 |
Use body font family | Styles the heading with the body font instead of the heading font. Only available when Heading size is not set to Body. | Off |
Remove heading shadow | Removes the heading's shadow. Only available when Heading size is not set to Body. | Off |
Show left icon | Shows an icon to the left of the heading. The icon renders only when this is on and a Left icon name is chosen. | Off |
Left icon name | The icon shown next to the heading, such as Check, Caret, or Plus. | Check |
Open by default | Whether the row starts expanded rather than collapsed. | Off |
Show content on card | Displays the row's content on a card. | On |
Enable color scheme / Colors | Applies a color scheme to the row. The scheme applies only when enabled and a scheme is chosen. | Off / Scheme 1 |
Content alignment on desktop / on mobile | Horizontal alignment of the row's content. | Left |
Hide block on desktop / on mobile | Hides the row on the chosen device. | Off |
Adding an Accordion block comes with three preset rows — Question 1, Question 2, and Question 3 — prefilled with placeholder content, with only Question 1 open by default.