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.

Support
Targets (46)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the stack component.

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

The direction in which the stack's children are placed within the stack.

Accepts:

  • A single value, either inline or block
  • A responsive value string with the supported direction values as a query value
Anchor to justifyContent
justifyContent
Default: 'normal'
required

Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).

Use this to position items along the primary axis of the stack - horizontally for inline stacks or vertically for block stacks when wrapped into multiple lines.

Anchor to alignItems
alignItems
Default: 'normal'
required

Controls the alignment of children along the block axis (vertically in horizontal writing modes).

Use this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.

Anchor to alignContent
alignContent
Default: 'normal'
required

Controls the distribution of lines along the block axis when content wraps into multiple lines.

This property only affects stacks with wrapping content. For single-line stacks, use alignItems instead.

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

Adjusts spacing between elements.

Accepts:

  • A single SpacingKeyword value applied to both axes, such as large-100
  • A pair of values, such as large-100 large-500, to set the inline and block axes respectively
  • A responsive value string with the supported SpacingKeyword as a query value
Anchor to rowGap
rowGap
<"" | >
Default: '' - meaning no override
required

Adjusts spacing between elements in the block axis. This overrides the row value of gap.

Accepts:

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

Adjusts spacing between elements in the inline axis. This overrides the column value of gap.

Accepts:

Anchor to accessibilityRole
accessibilityRole
Default: 'generic'
required

The semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.

Anchor to background
background
Default: 'transparent'
required

The background color of the component.

Anchor to blockSize
blockSize
Default: 'auto'
required

The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).

Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions.

Learn more about block-size.

Anchor to minBlockSize
minBlockSize
Default: '0'
required

The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.

Learn more about min-block-size.

Anchor to maxBlockSize
maxBlockSize
Default: 'none'
required

The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.

Learn more about max-block-size.

Anchor to inlineSize
inlineSize
Default: 'auto'
required

The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about inline-size.

Anchor to minInlineSize
minInlineSize
Default: '0'
required

The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.

Learn more about min-inline-size.

Anchor to maxInlineSize
maxInlineSize
Default: 'none'
required

The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.

Learn more about max-inline-size.

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

The overflow behavior of the element.

  • visible: the content that extends beyond the element’s container is visible.
  • hidden: clips the content when it is larger than the element’s container. The element will not be scrollable and the users will not be able to access the clipped content by dragging or using a scroll wheel on a mouse.
Anchor to padding
padding
<<>>
Default: 'none'
required

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. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

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

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. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

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

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

Overrides the block-start value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

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

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

Overrides the block-end value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

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

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. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

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

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

Overrides the inline-start value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

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

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

Overrides the inline-end value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.

Anchor to border
border
Default: 'none' - equivalent to `none base auto`.
required

A border applied using shorthand syntax to specify width, color, and style in a single property.

Anchor to borderWidth
borderWidth
"" | <"small" | "small-100" | "base" | "large" | "large-100" | "none">
Default: '' - meaning no override
required

The thickness of the border on all sides. When set, this overrides the width value specified in the border property.

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

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.

Anchor to borderColor
borderColor
"" |
Default: '' - meaning no override
required

The color of the border using the design system's color scale. When set, this overrides the color value specified in the border property.

Anchor to borderRadius
borderRadius
<>
Default: 'none'
required

The roundedness of the element's corners using the design system's radius scale.

Anchor to accessibilityLabel
accessibilityLabel
string
required

A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.

Anchor to accessibilityVisibility
accessibilityVisibility
"visible" | "hidden" | "exclusive"
Default: 'visible'
required

The visibility mode of the element for both visual and assistive technology users.

  • visible: The element is visible to all users (both sighted users and screen readers).
  • hidden: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.
  • exclusive: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.
Anchor to display
display
<"auto" | "none">
Default: 'auto'
required

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.

Anchor to SlotsSlots

The stack component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to children
children
HTMLElement

The child elements displayed within the stack component, which are arranged vertically or horizontally with consistent spacing.

Anchor to ExamplesExamples

Anchor to Add a vertical stackAdd a vertical stack

Create a vertical stack to arrange items with consistent spacing. This example shows badges stacked vertically with base gap spacing.

Preview

html

<s-stack gap="base">
<s-badge>Paid</s-badge>
<s-badge>Processing</s-badge>
<s-badge>Filled</s-badge>
<s-badge>Completed</s-badge>
</s-stack>

Anchor to Arrange items horizontally with an inline stackArrange items horizontally with an inline stack

Use the direction property to arrange items horizontally. This example shows badges laid out side by side with spacing between them.

Preview

html

<s-stack direction="inline" gap="large-100">
<s-badge>Item 1</s-badge>
<s-badge>Item 2</s-badge>
<s-badge>Item 3</s-badge>
</s-stack>

Anchor to Control item alignment and distributionControl item alignment and distribution

Use the justifyContent and alignItems properties to control how items are positioned within the stack. This example shows items vertically centered and aligned at the right, center, and left positions in the stack.

Preview

html

<s-stack direction="inline" justifyContent="space-between" alignItems="center">
<s-text>Left aligned</s-text>
<s-text>Centered text</s-text>
<s-text>Right aligned</s-text>
</s-stack>

Anchor to Fine-tune spacing with row and column gapsFine-tune spacing with row and column gaps

Use the gap, rowGap, and columnGap properties to fine-tune spacing between items in different directions. This example shows a stack with separate row and column gap values.

Preview

html

<s-stack gap="large-100 large-500" rowGap="large-300" columnGap="large-200">
<s-box
padding="large-100"
borderColor="base"
borderWidth="small"
borderRadius="large-100"
>
Box with custom spacing
</s-box>
<s-box
padding="large-100"
borderColor="base"
borderWidth="small"
borderRadius="large-100"
>
Another box
</s-box>
</s-stack>

Anchor to Create a responsive stack with container queriesCreate a responsive stack with container queries

Use container queries to change the stack direction and gap based on available width. This example shows a stack that switches from vertical to horizontal when the container exceeds 500px.

Preview

html

<s-query-container>
<s-stack
direction="@container (inline-size > 500px) inline, block"
gap="@container (inline-size > 500px) base, small-300"
>
<s-box
padding="large-100"
borderColor="base"
borderWidth="small"
borderRadius="large-100"
>
Content 1
</s-box>
<s-box
padding="large-100"
borderColor="base"
borderWidth="small"
borderRadius="large-100"
>
Content 2
</s-box>
</s-stack>
</s-query-container>

Anchor to Best practicesBest practices

  • Match spacing to content relationships: Spacing communicates how closely related items are. Tight spacing suggests items belong together, while generous spacing separates distinct groups. Choose spacing that reflects your content hierarchy.
  • Understand wrapping behavior: Inline stacks wrap automatically when content doesn't fit. This is often desired, but if you need precise control over line breaks or multi-row layouts, consider alternative layout approaches.
  • Use alignment intentionally: Alignment properties determine how items distribute within the stack. Default alignment works for most cases, but consider alignment when items have different sizes or when you need specific positioning.

Anchor to LimitationsLimitations

  • The component doesn't support variable spacing between individual items. All items in a stack have uniform gap spacing. If you need different spacing between specific items, you'll need to nest multiple stacks or use a different layout approach.
Was this page helpful?