--- title: "Stack block" description: "Stack and Nested Stack layouts with rich text, inline elements, media and token gaps." requested_language: fr language: en translation_notice: "This page isn't translated yet" url: https://docs.systhema.app/fr/next/payload/blocks/stack version: unreleased (main) docs_index: https://docs.systhema.app/fr/next/llms.txt --- > This page isn't translated yet. Showing English. 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. ![The stack block fields in the Payload editor](./images/stack.light.webp) ## Where it is offered `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`. ## Fields ### `stack` | 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) | ### `nestedStack` | 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) | ## Items Stack items include [Rich Text](https://docs.systhema.app/fr/next/payload/blocks/rich-text.md), 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 `` variant; see [Linkable icons](https://docs.systhema.app/fr/next/payload/editor/icons.md#linkable-icons). ## Rendered output Renders the [Stack component](https://docs.systhema.app/fr/next/components/stack.md). A stack is a laid-out group, so it cancels scroll reveals of its children unless child animation is allowed; see [Child reveals](https://docs.systhema.app/fr/next/styling/animation.md#child-reveals). ## Converter `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. ## Customizing 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](https://docs.systhema.app/fr/next/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/fr/next/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/fr/next/payload/frontend/live-preview/client-mode.md). ## Related - [Stack component](https://docs.systhema.app/fr/next/components/stack.md) - [Rich Text block](https://docs.systhema.app/fr/next/payload/blocks/rich-text.md)