Stack block
Stack and Nested Stack layouts with rich text, inline elements, media and token gaps.
On this page
The Stack block arranges a list of items in a row or a column with a token gap: rich text, buttons, chips and icons. Nested Stack provides the same layout inside a fragment editor.
Where it is offeredLink to this section
StackBlock is offered in root and region. The fragment editor offers NestedStackBlock when withStack is true. Neither appears in slot. Rich Text items disable further stack insertion with withStack: false.
FieldsLink to this section
stackLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
alignItems | radio | Align Items | center | Required; Options: start (Start), center (Center), end (End), stretch (Stretch) |
direction | radio | Direction | wrap | Required; Options: col (Column), row (Row), wrap (Wrap) |
gapX | number | Horizontal Gap | 1 | Required |
gapY | number | Vertical Gap | 1 | Required |
heightPercentage | number | 100 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="percentage" | |
heightPixels | number | 512 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="pixels" | |
heightType | radio | Height | percentage | Required; Shown when visible(siblingData); Options: percentage (%), pixels (px) |
items | blocks | Items | ||
justifyContent | radio | Jusitfy Content | start | Required; Options: start (Start), center (Center), end (End), between (Between) |
message | ui | |||
mobileOverrides.alignItems | radio | Align Items | start | Shown when siblingData?.setMobileOverrides; Required; Options: start (Start), center (Center), end (End), stretch (Stretch) |
mobileOverrides.direction | radio | Direction | col | Shown when siblingData?.setMobileOverrides; Required; Options: col (Column), row (Row), wrap (Wrap) |
mobileOverrides.gapX | number | Horizontal Gap | 2 | Shown when siblingData?.setMobileOverrides; Required |
mobileOverrides.gapY | number | Vertical Gap | 2 | Shown when siblingData?.setMobileOverrides; Required |
mobileOverrides.justifyContent | radio | Jusitfy Content | start | Shown when siblingData?.setMobileOverrides; Required; Options: start (Start), center (Center), end (End), between (Between) |
mobileOverrides | group | Mobile Settings | Shown when siblingData?.setMobileOverrides | |
setHeight | checkbox | Define Height | false | |
setMobileOverrides | checkbox | Different settings for mobile | false | |
setWidth | checkbox | Define Width | false | |
widthPercentage | number | 100 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="percentage" | |
widthPixels | number | 512 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="pixels" | |
widthType | radio | Width | percentage | Required; Shown when visible(siblingData); Options: percentage (%), pixels (px) |
nestedStackLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
alignItems | radio | Align Items | center | Required; Options: start (Start), center (Center), end (End), stretch (Stretch) |
direction | radio | Direction | wrap | Required; Options: col (Column), row (Row), wrap (Wrap) |
gapX | number | Horizontal Gap | 1 | Required |
gapY | number | Vertical Gap | 1 | Required |
heightPercentage | number | 100 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="percentage" | |
heightPixels | number | 512 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="pixels" | |
heightType | radio | Height | percentage | Required; Shown when visible(siblingData); Options: percentage (%), pixels (px) |
items | blocks | Items | ||
justifyContent | radio | Jusitfy Content | start | Required; Options: start (Start), center (Center), end (End), between (Between) |
message | ui | |||
mobileOverrides.alignItems | radio | Align Items | start | Shown when siblingData?.setMobileOverrides; Required; Options: start (Start), center (Center), end (End), stretch (Stretch) |
mobileOverrides.direction | radio | Direction | col | Shown when siblingData?.setMobileOverrides; Required; Options: col (Column), row (Row), wrap (Wrap) |
mobileOverrides.gapX | number | Horizontal Gap | 2 | Shown when siblingData?.setMobileOverrides; Required |
mobileOverrides.gapY | number | Vertical Gap | 2 | Shown when siblingData?.setMobileOverrides; Required |
mobileOverrides.justifyContent | radio | Jusitfy Content | start | Shown when siblingData?.setMobileOverrides; Required; Options: start (Start), center (Center), end (End), between (Between) |
mobileOverrides | group | Mobile Settings | Shown when siblingData?.setMobileOverrides | |
setHeight | checkbox | Define Height | false | |
setMobileOverrides | checkbox | Different settings for mobile | false | |
setWidth | checkbox | Define Width | false | |
widthPercentage | number | 100 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="percentage" | |
widthPixels | number | 512 | Required; Shown when visible(siblingData)&&siblingData?.[`${dimension}Type`]==="pixels" | |
widthType | radio | Width | percentage | Required; Shown when visible(siblingData); Options: percentage (%), pixels (px) |
ItemsLink to this section
Stack items include Rich Text, buttons, chips, icons, avatars and images. StackBlock also offers NestedStackBlock as an item; NestedStackBlock uses the base item list. An icon inside a Stack has the same Link Settings as a standalone Icon block and renders through the same <Icon.a> variant; see Linkable icons.
Rendered outputLink to this section
Renders the Stack component. A stack is a laid-out group, so it cancels scroll reveals of its children unless child animation is allowed; see Child reveals.
ConverterLink to this section
renderStack handles both stack and nestedStack nodes. It maps gap slider indices to token names, converts row/column/wrap direction, and forwards optional mobile overrides and explicit dimensions. Its item switch renders rich text, buttons, chips, icons, avatars and images. Those items are blocks-array records, not Lexical inline nodes.
CustomizingLink to this section
Import StackBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'block' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing stack slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.