Skip to main content

Stack

The stack component organizes elements horizontally or vertically along the block or inline axis. Use stack to structure layouts, group related components, control spacing between elements, or create flexible arrangements that adapt to content.

Stacks support gap spacing, alignment, wrapping, and distribution properties to create consistent, responsive layouts without custom CSS. For complex multi-column layouts with precise grid positioning, use grid.

Stack supports one-dimensional layouts only — for content that needs both rows and columns, use grid.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the stack component.

Anchor to accessibilityLabel
accessibilityLabel
string

A label announced by assistive technologies that describes the purpose or contents of the element. Only set this when the element's visible content doesn't provide enough context on its own.

Anchor to accessibilityRole
accessibilityRole
'aside' | 'footer' | 'header' | 'main' | 'section' | 'status' | 'none' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'alert' | 'generic'
Default: 'generic'

The semantic meaning of the stack's content, used by assistive technologies.

  • aside: Supporting content related to the main content.
  • footer: Information such as copyright, navigation links, and privacy statements.
  • header: A page or section header.
  • main: The primary content of the page.
  • section: A generic section that should have a heading or accessibilityLabel.
  • status: A live region with advisory information that is not urgent.
  • none: Strips semantic meaning while keeping visual styling.
  • navigation: A major group of navigation links.
  • ordered-list: A list of ordered items.
  • list-item: An item inside a list.
  • list-item-separator: A divider between list items.
  • unordered-list: A list of unordered items.
  • separator: A divider that separates sections of content.
  • alert: Important, usually time-sensitive information.
  • generic: A nameless container with no semantic meaning (renders a <div>).
Anchor to alignContent
alignContent
<Extract<$1['alignContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>
Default: 'normal'

Controls how lines of content are distributed along the cross axis when there is extra space.

  • normal: Default browser behavior.
  • space-between: Distributes lines evenly with no space at the edges.
  • space-around: Distributes lines evenly with equal space around each.
  • space-evenly: Distributes lines with equal space between and at the edges.
  • stretch: Stretches lines to fill the available space.
  • center: Packs lines toward the center.
  • start: Packs lines toward the start of the cross axis.
  • end: Packs lines toward the end of the cross axis.
Anchor to alignItems
alignItems
<Extract<$1['alignItems'], 'normal' | 'stretch' | 'center' | 'start' | 'end'>>
Default: 'normal'

Controls how child elements are aligned along the cross axis.

  • normal: Default browser behavior.
  • stretch: Stretches children to fill the cross axis.
  • center: Centers children along the cross axis.
  • start: Aligns children to the start of the cross axis.
  • end: Aligns children to the end of the cross axis.
Anchor to background
background
'base' | 'subdued' | 'transparent'
Default: 'transparent'

The background color of the stack.

  • base: The standard background color for general content areas.
  • subdued: A muted background for secondary or supporting content.
  • transparent: No background color (the default).
Anchor to blockSize
blockSize
<>
Default: 'auto'

The block size of the element (height in horizontal writing modes). Learn more about the block-size property.

  • SizeUnits: Specific size values in pixels, percentages, or zero for precise control.
  • auto: Automatically sizes based on content and layout constraints.
Anchor to border
border
Default: 'none'

A shorthand for setting the border width, color, and style in a single property. Individual border properties (borderWidth, borderStyle) can override values set here.

Anchor to borderRadius
borderRadius
<Extract<$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>
Default: 'none'

The roundedness of the stack's corners.

  • none: Sharp corners with no rounding.
  • small-100 / small: Subtle rounding for compact elements.
  • base: Standard rounding for most use cases.
  • large / large-100: More pronounced rounding for prominent containers.
  • max: Maximum rounding, creating a pill or circular shape.

Supports 1-to-4-value shorthand syntax for specifying different radii per corner.

Anchor to borderStyle
borderStyle
<> | ""
Default: '' - meaning no override

Controls the visual style of the border on all sides, such as solid, dashed, or dotted.

When set, this overrides the style value specified in the border property.

Supports 1-to-4-value syntax for specifying different styles per side:

  • One value: applies to all sides
  • Two values: applies to block sides (top/bottom) and inline sides (left/right) respectively
  • Three values: applies to block-start (top), inline sides (left/right), and block-end (bottom) respectively
  • Four values: applies to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) respectively
Anchor to borderWidth
borderWidth
<> | ''
Default: '' - meaning no override

The thickness of the border on all sides. Supports 1-to-4-value shorthand syntax for specifying different widths per side. Overrides the width value set by border.

Anchor to columnGap
columnGap
< | "">
Default: '' - meaning no override

The spacing between child elements along the inline axis (horizontal in horizontal writing modes). Overrides the inline-axis value set by gap.

Anchor to direction
direction
<"block" | "inline">
Default: 'block'

The axis along which child elements are arranged, using logical properties.

  • block: Children are stacked vertically (in horizontal writing modes). Content does not wrap.
  • inline: Children are arranged horizontally (in horizontal writing modes). Content wraps when it overflows.
Anchor to display
display
<"auto" | "none">
Default: 'auto'

Sets the outer display type of the component. The outer type sets a component’s participation in flow layout.

  • auto: The component’s initial value. The actual value depends on the component and context.
  • none: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.

Learn more about the display property.

Anchor to gap
gap
<<>>
Default: 'none'

The spacing between child elements. A single value applies to both the inline and block axes. A pair of space-separated values (for example, large-100 large-500) sets the inline and block axes independently.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to inlineSize
inlineSize
<>
Default: 'auto'

The inline size of the element (width in horizontal writing modes). Learn more about the inline-size property.

  • SizeUnits: Specific size values in pixels, percentages, or zero for precise control.
  • auto: Automatically sizes based on content and layout constraints.
Anchor to justifyContent
justifyContent
<Extract<$1['justifyContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>
Default: 'normal'

Controls how child elements are distributed along the main axis.

  • normal: Default browser behavior.
  • space-between: Distributes children evenly with no space at the edges.
  • space-around: Distributes children evenly with equal space around each.
  • space-evenly: Distributes children with equal space between and at the edges.
  • stretch: Stretches children to fill the available space.
  • center: Packs children toward the center.
  • start: Packs children toward the start of the main axis.
  • end: Packs children toward the end of the main axis.
Anchor to maxBlockSize
maxBlockSize
<>
Default: 'none'

The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the max-block-size property.

Anchor to maxInlineSize
maxInlineSize
<>
Default: 'none'

The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the max-inline-size property.

Anchor to minBlockSize
minBlockSize
<>
Default: '0'

The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the min-block-size property.

Anchor to minInlineSize
minInlineSize
<>
Default: '0'

The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the min-inline-size property.

Anchor to overflow
overflow
'hidden' | 'visible'
Default: 'visible'

The overflow behavior of the element.

  • visible: Content that extends beyond the container is visible.
  • hidden: Content that extends beyond the container is clipped and not scrollable.
Anchor to padding
padding
<<>>
Default: 'none'

The padding applied to all edges of the component.

Supports 1-to-4-value syntax using flow-relative values:

  • 1 value applies to all sides
  • 2 values apply to block (top/bottom) and inline (left/right)
  • 3 values apply to block-start (top), inline (left/right), and block-end (bottom)
  • 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)

Examples: base, large none, base large-100 base small

Use auto to inherit padding from the nearest container with removed padding.

Anchor to paddingBlock
paddingBlock
<<> | "">
Default: '' - meaning no override

The block-direction padding (top and bottom in horizontal writing modes).

Accepts a single value for both sides or two space-separated values for block-start and block-end.

Example: large none applies large to the top and none to the bottom.

Overrides the block value from padding.

Anchor to paddingBlockEnd
paddingBlockEnd
< | "">
Default: '' - meaning no override

The block-end padding (bottom in horizontal writing modes).

Overrides the block-end value from paddingBlock.

Anchor to paddingBlockStart
paddingBlockStart
< | "">
Default: '' - meaning no override

The block-start padding (top in horizontal writing modes).

Overrides the block-start value from paddingBlock.

Anchor to paddingInline
paddingInline
<<> | "">
Default: '' - meaning no override

The inline-direction padding (left and right in horizontal writing modes).

Accepts a single value for both sides or two space-separated values for inline-start and inline-end.

Example: large none applies large to the left and none to the right.

Overrides the inline value from padding.

Anchor to paddingInlineEnd
paddingInlineEnd
< | "">
Default: '' - meaning no override

The inline-end padding (right in LTR writing modes, left in RTL).

Overrides the inline-end value from paddingInline.

Anchor to paddingInlineStart
paddingInlineStart
< | "">
Default: '' - meaning no override

The inline-start padding (left in LTR writing modes, right in RTL).

Overrides the inline-start value from paddingInline.

Anchor to rowGap
rowGap
< | "">
Default: '' - meaning no override

The spacing between child elements along the block axis (vertical in horizontal writing modes). Overrides the block-axis value set by gap.

Anchor to ExamplesExamples

Anchor to Arrange items in a row with consistent spacingArrange items in a row with consistent spacing

Lay out children in a horizontal sequence with consistent spacing. This example arranges four items in a row using direction="inline" and gap="base".

Arrange items in a row with consistent spacing

A rendered example of the stack component

html

<s-stack accessibilityLabel="Item list" direction="inline" gap="base">
<s-box background="subdued" border="base" padding="base"><s-text>Item 1</s-text></s-box>
<s-box background="subdued" border="base" padding="base"><s-text>Item 2</s-text></s-box>
<s-box background="subdued" border="base" padding="base"><s-text>Item 3</s-text></s-box>
<s-box background="subdued" border="base" padding="base"><s-text>Item 4</s-text></s-box>
</s-stack>

Anchor to Space items apart with block directionSpace items apart with block direction

Push the first and last items to opposite ends of a vertical stack. This example separates two text elements with justifyContent="space-between" and direction="block" so they pin to the top and bottom.

html

<s-stack direction="block" gap="small" justifyContent="space-between" minBlockSize="120px">
<s-text>Shipping</s-text>
<s-text>Free</s-text>
</s-stack>

Anchor to Align inline items with center alignmentAlign inline items with center alignment

Align inline items along the cross axis. This example centers three status badges vertically with alignItems="center" on direction="inline".

html

<s-stack direction="inline" gap="small" alignItems="center">
<s-badge>Standard</s-badge>
<s-badge tone="neutral">Processing</s-badge>
<s-badge tone="critical">Action needed</s-badge>
</s-stack>

Anchor to Best practicesBest practices

  • Use smaller gaps for related items: Apply smaller gaps between tightly related elements like label-value pairs, and larger gaps between distinct groups.
  • Keep spacing consistent: Use the same gap value across stacks on the same page for visual harmony.
  • Choose stack over grid for linear layouts: Stack handles one-dimensional layouts (a single row or column) more simply than grid. Use grid only when you need rows and columns.
  • Set explicit direction: Always specify direction="inline" or direction="block" so the layout intent is clear to other developers.
Was this page helpful?