> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/modules/stack.md).

# Stack

![A Stack containing children elements arranged horizontally](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FKLCF0SSd3sr1asO5hqFy%2Fstacked-layout-module.png?alt=media\&token=7b4ea20f-e445-48a3-a185-a0f9483956e8)

## Overview

A **Stack** is a type of Layout module which stacks children vertically or horizontally.

To create a Stack, drag the Stack module from the module library into an open slot on a page.

## Layout Settings <a href="#layout-settings" id="layout-settings"></a>

**Layout Settings** contains properties that allow you to control how the Stack lays out its children.

![](https://cdn.document360.io/51d5f5f5-89d8-4165-89b4-3d8ba1f39542/Images/Documentation/Screen%20Shot%202022-04-06%20at%203.28.00%20PM.png)

### Properties

**Orientation** (required)\
*Dropdown - `horizontal` or `vertical`*\
Defines whether the children of a stack are arranged in either a vertical or horizontal direction.

![A Horizontal stack](https://cdn.document360.io/51d5f5f5-89d8-4165-89b4-3d8ba1f39542/Images/Documentation/horizontal-stack.png) ![A Vertical stack](https://2635135911-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9NyC60xfSabdCmQW0heP%2Fuploads%2FbYjTnbeL7e3JdGIrnxeZ%2Fvertical-stack.png?alt=media\&token=3ab5569c-f783-4bdb-8713-15143c74e542)

[**Preset**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/)\
*Dropdown*\
If a preset is selected, will return a flex-layout based on selection. Falls back on orientation.

* `start`
* `center`
* `end`
* `space-between`
* `space-around`
* `space-evenly`

**Align**\
*Dropdown*\
Sets how children of a stack are aligned. The following options can be used:

* `start`
* `center`
* `end`

**Enable Auto Layout**\
B*oolean - `true` or `false`*

**Gap Sizing**\
*String*\
Defines the space between children of the Stack. This property will only add space between children, not on the outside edge of children.

[**Padding**](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)\
*String*\
Defines the padding around the edge of the Stack. This property will only add space around the edge of the stack, not between children. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

[**Margin**](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)\
*String*\
Defines the margin around the outside of the Stack. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

[**Background Image**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)\
S*tring, url*\
Defines a background image for the Stack. This property accepts a URL of an image.

[**Background Color**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)\
*String - Valid color string (`white`) or hex code (`#FFFFF`)*\
Defines a background color for the Stack.

[**Background Position**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)\
*String, css property value*\
Defines the position of the background, if one was specified.

[**Background Size**](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)\
*String, css property value*\
Defines the size mode of the background.

[**Max Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height)\
*String*\
Defines the max height of the the Stack. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Min Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height)\
String\
Defines the minimum height of the the Stack. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `6px` or `1em`

[**Height**](https://developer.mozilla.org/en-US/docs/Web/CSS/height)\
*String*\
If specified, sets a fixed height (in px or em) of the Stack. This property accepts lengths followed by a relative unit (`em`, `ex`, or `px`) or percentages. Example: `500px` or `5em`

**Style attribute**\
*String, css style property input*\
Can apply additional CSS to customize the stack.

## Nodes <a href="#nodes" id="nodes"></a>

### Broadcasters

#### **Stacked:animationState**

Animation broadcast event&#x20;

**Parameters**

**stateName** - Animation state name that is used for class name based animations.

#### **Stacked:scrollTo**

Scroll to page position broadcast event

**Parameters**

**scrollX** - Horizontal scroll position.

**scrollY** - Vertical scroll position.

**anchorElId** - Initial HTML Element Id to attempt scrolling to

**elementId** - Fallback HTML Element Id to scroll to