--- title: "Layout elements: containers, carousels, bottom sheets" description: "Group elements into stacks, carousels, and bottom sheets in the Flow Builder." --- Layout elements group other elements together and control how they're laid out on the screen. The Flow Builder includes four layout element types: - **Stacks**: arrange children along an axis — vertically or horizontally - **Carousel**: a swipeable container that shows one slide at a time - **Bottom Sheet**: a panel that slides up from the bottom of the screen and renders on top of the underlying content - **Dividers**: thin lines that separate rows or columns :::link **Tabs** also fall under this umbrella, but live in a separate article. See [Tabs](builder-tabs) for details. ::: ## Stacks :::link Main article: [Element positioning](manage-paywall-ui-elements) ::: Stacks group elements vertically or horizontally. The **Vertical Stack** arranges elements as rows; the **Horizontal Stack** arranges them as columns. :::tip Nest stacks inside each other to compose more complex layouts. ::: ### Change stack direction A stack's direction isn't fixed. Switch between **Vertical**, **Horizontal**, and **Free** in the **Layout** section of the right panel at any time — no need to delete and re-create the container. Configure spacing, alignment, and distribution in the same **Layout** section. Children render in the order they appear in the **Layers** panel — drag to reorder. ### Wrap and unwrap To turn an existing element into a stack, select it and use the **Wrap** [layer action](paywall-layout-and-products#layer-actions). Drag additional elements into the new stack from the **Layers** panel. To remove a stack and promote its children one level up, use **Unwrap**. ## Carousel A **Carousel** is a swipeable container that shows one slide at a time. The user swipes horizontally to reveal the next slide, or the carousel auto-advances on a timer. A Carousel contains a set of **Slide** layers. When the slide is active, the elements on that layer appear on the screen. Unlike Tabs, the carousel's active slide is not exposed as a [selectable group](flow-selectable-elements) — slides can't be referenced in conditions or dynamic text. Use a Carousel for visual rotation, not for user-driven branching. ### Change active slide When you select the carousel, the builder displays a pop-up control bar with a **Slide** dropdown and a **+ Add Slide** button. - Click **+ Add Slide** to add a new empty slide. - Use the **Slide** dropdown to switch which slide is active on the canvas — or click the corresponding Slide layer in the **Layers** panel. To reorder slides, drag them within the Carousel in the Layers panel. {/* TODO: on-device GIF */} ### Properties #### Auto-scroll Auto-scroll cycles slides automatically — the user doesn't have to swipe to see all the content. Two timing controls determine its behavior: - **Delay** — how long each slide stays visible (ms). - **Duration** — how long the transition between slides takes (ms). #### Carousel sizing Dedicated controls determine the size of the carousel and the spacing between adjacent slides. Set **Height** to **Fixed** so the layout doesn't shift as the user swipes between slides of different content lengths. #### Slide sizing Per-slide **Width** and **Height**. Defaults to Fill so each slide tracks the carousel's dimensions. Set a fixed width to create a peek effect where adjacent slides are partially visible. #### Dots The page indicator at the bottom of the carousel. It tells the user how many slides exist and which one is active. Turn off the **Show dots** toggle to hide the slide indicator. When dots are visible, the following properties control their appearance: - **Color** — fill of an inactive dot. - **Active Color** — fill of the dot for the currently visible slide. - **Size** — diameter of each dot, in pixels. - **Gap** — spacing between adjacent dots. - **Padding** — space between the dot row and the carousel content above. ## Bottom Sheet :::link Walkthrough: [Show all plans in a bottom sheet](show-plans-bottom-sheet) ::: A **Bottom Sheet** is a layout panel that slides up from the bottom of the screen, on top of the underlying content. The sheet always blurs anything behind it; the blur can't be turned off. Trigger it on tap — for example, behind a **Show all plans** link — rather than on screen load. ### Structure A Bottom Sheet ships with two top-level layers: - **Heading** — a stack at the top of the sheet, prefilled with a **Title** text layer and a **Close button** Close. Edit or remove them as needed. - **Content** — the main container. Drop products, buttons, links, or any other elements into it. {/* TODO: on-device GIF */} ### Initial visibility By default, a bottom sheet appears as soon as the screen renders. To open it on demand instead: 1. **Build out the sheet's content first** — hidden layers can't be edited, so the sheet has to stay visible until you're done filling it. 2. In the **Layers** panel, select the bottom sheet. 3. Set **Visibility** to **Hide** Hide. The sheet stays in the layer tree but stops rendering on the screen. ### Triggering the bottom sheet To open a hidden bottom sheet, attach a **Show** action to another element: 1. Select the trigger element (e.g., a button or text link). 2. Open the **Interactions** tab in the right panel. 3. Click **Add trigger** > **On tap**, then **Add action**. 4. Set **Action** to **Show** and pick the bottom sheet from the dropdown. ## Dividers The **Horizontal Divider** and **Vertical Divider** are thin lines that separate content. Use the Horizontal Divider to split rows, and the Vertical Divider to split columns inside a horizontal stack. Adjust thickness, color, and length from the right panel.