Overview

The Stack component provides a flexible layout system for organizing content with consistent spacing. It offers vertical stacking (default), horizontal grid layouts, and aligned horizontal arrangements, making it easy to create structured layouts with uniform gaps between elements.

API Reference

Stack

The root container component that arranges child elements vertically with consistent spacing (gap-5).

Stack.Line

A horizontal layout component that uses CSS Grid to arrange child elements in equal-width columns with consistent spacing (gap-2). Items are stretched to fill their containers.

Stack.StartEnd

A flexible horizontal layout component for arranging content with specific alignment options.

align: "start" | "end" - Alignment of content (default: "start")

Basic Usage

Use Stack for vertical layouts, Stack.Line for horizontal grid arrangements, and Stack.StartEnd for aligned horizontal layouts. Each component applies consistent spacing between child elements.

Vertical Stack

The default Stack component arranges content vertically with consistent gaps (gap-5).

Item 1

Item 2

Item 3

<Stack>
	<Block caption="Item 1"></Block>
	<Block caption="Item 2"></Block>
	<Block caption="Item 3"></Block>
</Stack>

Horizontal Stack (Line)

Stack.Line arranges content horizontally using CSS Grid with equal-width columns and consistent gaps (gap-2). Items are stretched to fill their containers.

Item A

Item B

Item C

<Stack.Line>
	<Block caption="Item A"></Block>
	<Block caption="Item B"></Block>
	<Block caption="Item C"></Block>
</Stack.Line>

Aligned Horizontal Layout (StartEnd)

Stack.StartEnd provides flexible horizontal layouts with specific alignment options. Use align="start" for left alignment or align="end" for right alignment.

Start aligned

Element at Start

Also start

Also element at Start

End aligned

Element at End

Also end

Also element at End

<Stack>
	<Stack.StartEnd align="start">
		<Block caption="Start aligned">Element at Start</Block>
		<Block caption="Also start">Also element at Start</Block>
	</Stack.StartEnd>
	<Stack.StartEnd align="end">
		<Block caption="End aligned">Element at End</Block>
		<Block caption="Also end">Also element at End</Block>
	</Stack.StartEnd>
</Stack>

Nested Stacks

Combine different Stack components to create complex layouts.

Header

Left

Center

Right

Aligned to end

End-aligned content

Footer

<Stack>
	<Block caption="Header"></Block>
	<Stack.Line>
		<Block caption="Left"></Block>
		<Block caption="Center"></Block>
		<Block caption="Right"></Block>
	</Stack.Line>
	<Stack.StartEnd align="end">
		<Block caption="Aligned to end">End-aligned content</Block>
	</Stack.StartEnd>
	<Block caption="Footer"></Block>
</Stack>