Stack - Flowboard

What it is

Stack is the main layout component in Flowboard. You use it to arrange other components vertically, horizontally, or as layered overlays on the canvas.

What it’s best for

Use Stack when you need one component to hold and organize the rest of the screen.

When to use it

Build a hero screen with headline, image, and button
Create a card layout with consistent spacing
Layer text over media for a more editorial look
Keep groups of related components aligned

When not to use it

Do not use it for a single gap. Use Spacer instead.
Do not use it when you only need one precise overlay item. Add Positioned inside an existing stack instead.

How to add it in the dashboard

Open the screen in the dashboard.
In the Components panel, add Stack.
Select the stack on the canvas.
In the properties panel, choose the layout direction you want.
Add child components inside the stack and adjust spacing, alignment, and appearance.

Key parameters

Parameter	What it changes	When to adjust it
Axis	Sets whether items flow vertically, horizontally, or as overlays	Change it when the screen structure changes
Alignment	Controls how items line up across the stack	Use it when content looks off-center or uneven
Distribution	Controls how items spread across available space	Use it when you need tighter grouping or more breathing room
Child spacing	Adds space between child components	Use it to create rhythm without adding extra spacers
Width and height mode	Decides whether the stack fills space, fits content, or uses a fixed size	Change it when a section should stretch or hug content
Margin	Adds space outside the stack	Use it to separate the whole block from surrounding content
Fill	Adds a solid color, gradient, or image background	Use it to create cards, sections, or visual emphasis
Border and shadow	Adds structure and depth	Use it for cards, panels, or highlighted content
Corner radius	Softens the shape of the container	Use it when you want a more polished card style

Example use cases

A welcome screen with a logo, headline, short body copy, and one primary button
A pricing highlight card with a title, benefits list, and upgrade action
A feature education screen with an image background and text layered over it

Best practices

Start with Stack for the main screen structure, then add content inside it.
Use spacing and alignment first before reaching for decorative effects.
Keep one clear content group per stack when possible.
If the screen has one main message, let the stack reinforce that hierarchy.

Common mistakes

Adding too many nested stacks for a simple layout
Using child spacing and spacers together without a clear reason
Mixing too many visual treatments in the same stack

Components library Positioned