These stack elements are currently only intended for use inside <vision-popover-content> components.

Please do not use these elements in other contexts until further notice.

Overview

The Stack web components provide a flexible layout system for organizing content with consistent spacing using standard HTML elements. They offer vertical stacking, horizontal layouts with start/end positioning, making them ideal for creating structured layouts in any web environment.

Components

<vision-stack>

The root container element that arranges child elements vertically with consistent spacing.

<vision-stack-line>

A horizontal layout element that automatically separates content into start and end sections. Content placed inside <vision-stack-end> elements will be aligned to the end, while all other content aligns to the start.

<vision-stack-start>

A marker element used within <vision-stack-line> to explicitly group content at the start position.

<vision-stack-end>

A marker element used within <vision-stack-line> to group content that should be aligned to the end position.

Basic Usage

Vertical Stack

The default <vision-stack> element arranges content vertically with consistent gaps.

Item 1

Item 2

Item 3

<!-- source -->
<vision-stack>
	<Block caption="Item 1">Item 1</Block>
	<Block caption="Item 2">Item 2</Block>
	<Block caption="Item 3">Item 3</Block>
</vision-stack>

Horizontal Layout

<vision-stack-line> creates a horizontal layout where content automatically aligns to the start

Item Top

Start Item

Item Bottom

<!-- source -->
<vision-stack>
	<Block caption="Item Top">Item Top</Block>
	<vision-stack-line>
		<Block caption="Start Item">Start Item</Block>
		<Block caption="Start Item">Start Item</Block>
	</vision-stack-line>
	<Block caption="Item Bottom">Item Bottom</Block>
</vision-stack>

Horizontal Layout with Start/End

<vision-stack-line> creates a horizontal layout where content automatically aligns to the start, except for content wrapped in <vision-stack-end> which aligns to the end.