Stack

A flex-based layout component for stacking elements vertically or horizontally with consistent spacing.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<Stack />

Basic Vertical

Item 1

Item 2

Item 3

Horizontal

Item 1

Item 2

Item 3

Gap Sizes

Gap 1

Gap 4

Gap 8

Alignment

Direction — interactive

Pick a direction to see it applied live.

Item 1

Item 2

Item 3

Property	Type	Default	Description
Direction	Lumeo.Orientation	Vertical	Stack direction. Values: Vertical (flex-col), Horizontal (flex-row).
Gap	string?	"4"	Spacing between items. Maps to gap-{value} (e.g. "2", "4", "8").
Align	string?	—	Cross-axis alignment. Maps to items-{value} (e.g. "center", "start", "end").
Justify	string?	—	Main-axis alignment. Maps to justify-{value} (e.g. "center", "between", "end").
Wrap	bool	false	Whether items should wrap to the next line when they overflow.