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

Stacks

Stacks group elements vertically or horizontally. The Vertical Stack arranges elements as rows; the Horizontal Stack arranges them as columns.

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. 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 — 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.

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

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.

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.