Stack

Generic flex stack utility component for vertical/horizontal layouts..

Examples

Properties

PropertyAttributeDescriptionType nameTypeDefault
directiondirectionMain axis (`vertical` | `horizontal`)DuoStackDirection"vertical" | "horizontal""vertical"
spacingspacingGap: `none` or space token key (`xxs`…`xxl`; default `m`)DuoSpacing(typeof duoSpacingValues)[number]"m"
alignalignCross-axis alignmentDuoStackAlign"start" | "center" | "end" | "stretch""stretch"
justifyjustifyMain-axis alignmentDuoStackJustify"start" | "center" | "end" | "between""start"

Slots

NameDescription
defaultChild elements to arrange

Usage

The Stack layout’s potential is vast. Wherever elements are layered vertically, a Stack likely applies. Only side-by-side elements (like grid cells) shouldn’t use a Stack. Grid cells are probably Stacks, and the grid itself part of a Stack.