Layout types
The layout types available for organising block variables in the site builder.
Layout types are the building blocks used to organise variables within the site builder. They are nested inside a layout to create a structured editing experience for creators.
Available types
| Type | Description | Can be nested in |
|---|---|---|
| Tab | Groups variables into top-level tabs. | Layout root only |
| Accordion | Collapsible group of variables. | Tab |
| Accordion toggle | Collapsible group controlled by a boolean variable — elements are shown or hidden based on the boolean's value. | Tab, Accordion |
Nesting rules
Layout types follow specific nesting rules:
- Tabs can only be declared at the top level of a layout
- Accordions can be nested inside tabs, but not inside other accordions or accordion toggles
- Accordion toggles can be nested inside tabs or accordions, but not inside other accordion toggles
layout:
- type: tab # Top level
label: Content
elements:
- heading # Variable directly in tab
- type: accordion # Nested in tab
label: Body
elements:
- text
- type: accordion_toggle # Nested in accordion
toggle_attribute: show_button
elements:
- button_text
- type: tab # Top level
label: Design
elements:
- background_color