Stack

States

Stack is not interactive. By default it renders a <div>; its state does not change with mouse, keyboard or touch.

State	Support	Visual change
Default	Yes	Vertical flow; gap from gap, alignment from align
Hover	None	None; the element does not react to the pointer
Pressed	None	None; the element cannot be clicked
Focus	None	None; the element takes no focus and draws no focus ring
Disabled	None	None; it has no action to disable
Selected	None	None; it cannot be selected

Measurements

Stack has no fixed size of its own; its height comes from its children and gap, its width from its container.

Property	Value	Token
Space between children (gap)	none 0, xxs 2, xs 4, sm 6, md 8, lg 12, xl 16, 2xl 20, 3xl 24, 4xl 32, 5xl 40, 6xl 48, 7xl 56 px; default md	space-{name}
Separator rule width	1 px; only when separator is on	-
Separator rule colour	subtle	color-border-subtle
Space around a separator	Padding of gap on both sides of the rule	space-{name}
Cross-axis alignment	stretch (default), start, center, end	-

Tokens

Values are shown for the selected brand; change the brand from the top bar.

Token	Sample	Light mode	Dark mode
--bigbang-space-xxs		2px2px2px	2px2px2px
--bigbang-space-xs		4px4px4px	4px4px4px
--bigbang-space-sm		6px6px6px	6px6px6px
--bigbang-space-md		8px8px8px	8px8px8px
--bigbang-space-lg		12px12px12px	12px12px12px
--bigbang-space-xl		16px16px16px	16px16px16px
--bigbang-space-2xl		20px20px20px	20px20px20px
--bigbang-space-3xl		24px24px24px	24px24px24px
--bigbang-space-4xl		32px32px32px	32px32px32px
--bigbang-space-5xl		40px40px40px	40px40px40px
--bigbang-space-6xl		48px48px48px	48px48px48px
--bigbang-space-7xl		56px56px56px	56px56px56px
--bigbang-color-border-subtle		#ededed#ededed#ededed	#303030#303030#303030

Motion and interaction

Interaction	Motion	Reduced motion
Hover, press, focus	None: Stack is not interactive	Nothing to reduce
Enter and exit	None: Stack uses no duration or easing token; content appears and leaves at once	Nothing to reduce
Layout change	None: the layout changes without a transition when the viewport width changes	Nothing to reduce

Stack uses no motion preset; the motion of its children belongs to their own components. For details, see the Motion page.