--- title: Stack description: >- 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. api_version: 2026-04 source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack.md --- # 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/grid). Stack supports one-dimensional layouts only — for content that needs both rows and columns, use [grid](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/grid). ### Support Targets (24) ### Supported targets * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Order details**: Stack order information vertically, such as product names, prices, and shipping status, for a clear reading flow. * **Inline metadata**: Arrange badges, dates, and labels in a horizontal row to surface key information at a glance. * **Address blocks**: Group address lines vertically with consistent spacing for shipping and billing sections. * **Header rows**: Distribute a heading and a status badge across a row using `justify-content="space-between"` to create balanced headers. *** ## Properties Configure the following properties on the stack component. * **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. * **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 `
`). * **alignContent** **MaybeResponsive\>** **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. * **alignItems** **MaybeResponsive\>** **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. * **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). * **blockSize** **MaybeResponsive\** **Default: 'auto'** The block size of the element (height in horizontal writing modes). Learn more about the [block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size). * `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. * `auto`: Automatically sizes based on content and layout constraints. * **border** **BorderShorthand** **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. * **borderRadius** **MaybeAllValuesShorthandProperty\>** **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. * **borderStyle** **MaybeAllValuesShorthandProperty\ | ""** **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](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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 * **borderWidth** **MaybeAllValuesShorthandProperty\ | ''** **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`. * **columnGap** **MaybeResponsive\** **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`. * **direction** **MaybeResponsive<"block" | "inline">** **Default: 'block'** The axis along which child elements are arranged, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). * `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. * **display** **MaybeResponsive<"auto" | "none">** **Default: 'auto'** Sets the outer display type of the component. The outer type sets a component’s participation in [flow layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_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](https://developer.mozilla.org/en-US/docs/Web/CSS/display). * **gap** **MaybeResponsive\>** **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. * **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. * **inlineSize** **MaybeResponsive\** **Default: 'auto'** The inline size of the element (width in horizontal writing modes). Learn more about the [inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size). * `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control. * `auto`: Automatically sizes based on content and layout constraints. * **justifyContent** **MaybeResponsive\>** **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. * **maxBlockSize** **MaybeResponsive\** **Default: 'none'** The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the [max-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size). * **maxInlineSize** **MaybeResponsive\** **Default: 'none'** The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the [max-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size). * **minBlockSize** **MaybeResponsive\** **Default: '0'** The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the [min-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size). * **minInlineSize** **MaybeResponsive\** **Default: '0'** The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the [min-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size). * **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. * **padding** **MaybeResponsive\>** **Default: 'none'** The padding applied to all edges of the component. Supports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) 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. * **paddingBlock** **MaybeResponsive\ | "">** **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`. * **paddingBlockEnd** **MaybeResponsive\** **Default: '' - meaning no override** The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from `paddingBlock`. * **paddingBlockStart** **MaybeResponsive\** **Default: '' - meaning no override** The block-start padding (top in horizontal writing modes). Overrides the block-start value from `paddingBlock`. * **paddingInline** **MaybeResponsive\ | "">** **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`. * **paddingInlineEnd** **MaybeResponsive\** **Default: '' - meaning no override** The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from `paddingInline`. * **paddingInlineStart** **MaybeResponsive\** **Default: '' - meaning no override** The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from `paddingInline`. * **rowGap** **MaybeResponsive\** **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`. ### MaybeResponsive Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string. - \`T\`: Base value that applies in all conditions. - \`@container${string}\`: Container query string for conditional responsive styling based on container size. ```ts T | `@container${string}` ``` ### StackProps * accessibilityLabel 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. ```ts string ``` * accessibilityRole 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 \`\
\`). ```ts 'aside' | 'footer' | 'header' | 'main' | 'section' | 'status' | 'none' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'alert' | 'generic' ``` * alignContent 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. ```ts MaybeResponsive> ``` * alignItems 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. ```ts MaybeResponsive> ``` * background 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). ```ts 'base' | 'subdued' | 'transparent' ``` * blockSize The block size of the element (height in horizontal writing modes). Learn more about the \[block-size property]\(https://developer.mozilla.org/en-US/docs/Web/CSS/block-size). - \`SizeUnits\`: Specific size values in pixels, percentages, or zero for precise control. - \`auto\`: Automatically sizes based on content and layout constraints. ```ts MaybeResponsive ``` * border A shorthand for setting the border width, color, and style in a single property. Individual border properties (\`borderWidth\`, \`borderStyle\`) can override values set here. ```ts BorderShorthand ``` * borderRadius 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. ```ts MaybeAllValuesShorthandProperty> ``` * borderStyle 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]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) 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 ```ts MaybeAllValuesShorthandProperty | "" ``` * borderWidth 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\`. ```ts MaybeAllValuesShorthandProperty | '' ``` * columnGap The spacing between child elements along the inline axis (horizontal in horizontal writing modes). Overrides the inline-axis value set by \`gap\`. ```ts MaybeResponsive ``` * direction The axis along which child elements are arranged, using \[logical properties]\(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_logical\_properties\_and\_values). - \`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. ```ts MaybeResponsive<"block" | "inline"> ``` * display Sets the outer display type of the component. The outer type sets a component’s participation in \[flow layout]\(https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_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]\(https://developer.mozilla.org/en-US/docs/Web/CSS/display). ```ts MaybeResponsive<"auto" | "none"> ``` * gap 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. ```ts MaybeResponsive> ``` * id 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. ```ts string ``` * inlineSize The inline size of the element (width in horizontal writing modes). Learn more about the \[inline-size property]\(https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size). - \`SizeUnits\`: Specific size values in pixels, percentages, or zero for precise control. - \`auto\`: Automatically sizes based on content and layout constraints. ```ts MaybeResponsive ``` * justifyContent 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. ```ts MaybeResponsive> ``` * maxBlockSize The maximum block size of the element (maximum height in horizontal writing modes). Learn more about the \[max-block-size property]\(https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size). ```ts MaybeResponsive ``` * maxInlineSize The maximum inline size of the element (maximum width in horizontal writing modes). Learn more about the \[max-inline-size property]\(https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size). ```ts MaybeResponsive ``` * minBlockSize The minimum block size of the element (minimum height in horizontal writing modes). Learn more about the \[min-block-size property]\(https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size). ```ts MaybeResponsive ``` * minInlineSize The minimum inline size of the element (minimum width in horizontal writing modes). Learn more about the \[min-inline-size property]\(https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size). ```ts MaybeResponsive ``` * overflow 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. ```ts 'hidden' | 'visible' ``` * padding The padding applied to all edges of the component. Supports \[1-to-4-value syntax]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box) 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. ```ts MaybeResponsive> ``` * paddingBlock 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\`. ```ts MaybeResponsive | ""> ``` * paddingBlockEnd The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from \`paddingBlock\`. ```ts MaybeResponsive ``` * paddingBlockStart The block-start padding (top in horizontal writing modes). Overrides the block-start value from \`paddingBlock\`. ```ts MaybeResponsive ``` * paddingInline 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\`. ```ts MaybeResponsive | ""> ``` * paddingInlineEnd The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from \`paddingInline\`. ```ts MaybeResponsive ``` * paddingInlineStart The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from \`paddingInline\`. ```ts MaybeResponsive ``` * rowGap The spacing between child elements along the block axis (vertical in horizontal writing modes). Overrides the block-axis value set by \`gap\`. ```ts MaybeResponsive ``` ### SizeUnitsOrAuto Represents size values that can also be set to \`auto\` for automatic sizing. - \`SizeUnits\`: Specific size values in pixels, percentages, or zero for precise control. - \`auto\`: Automatically sizes based on content and layout constraints. Learn more about the \[auto value]\(https://developer.mozilla.org/en-US/docs/Web/CSS/width#auto). ```ts SizeUnits | "auto" ``` ### SizeUnits Represents size values in pixels, percentages, or zero. - \`\` \`${number}px\` \`\`: Absolute size in pixels for fixed dimensions (such as \`100px\`, \`24px\`). - \`\` \`${number}%\` \`\`: Relative size as a percentage of the parent container (such as \`50%\`, \`100%\`). - \`0\`: Zero size, equivalent to no dimension. ```ts `${number}px` | `${number}%` | `0` ``` ### BorderShorthand A shorthand string for specifying border properties. Accepts a size alone (\`'base'\`), size with color (\`'base base'\`), or size with color and style (\`'base base dashed'\`). Omitted values use their defaults. ```ts ReducedBorderSizeKeyword | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword}` | `${ReducedBorderSizeKeyword} ${ReducedColorKeyword} ${BorderStyleKeyword}` ``` ### ReducedBorderSizeKeyword The subset of border size values available for this component. - \`base\`: Standard border width. - \`large\`: Thick border for strong emphasis. - \`large-100\`: Extra thick border for maximum prominence. - \`large-200\`: The thickest available border. - \`none\`: No border. ```ts 'base' | 'large' | 'large-100' | 'large-200' | 'none' ``` ### ReducedColorKeyword The subset of border color values available for this component. - \`base\`: The standard border color for most contexts. ```ts 'base' ``` ### BorderStyleKeyword The visual style of a border. Learn more about \[border-style]\(https://developer.mozilla.org/en-US/docs/Web/CSS/border-style). - \`none\`: No border is rendered. - \`solid\`: A single continuous line. - \`dashed\`: A series of short dashes. - \`dotted\`: A series of round dots. - \`auto\`: The border style is determined automatically based on the surface's design system. ```ts "none" | "solid" | "dashed" | "dotted" | "auto" ``` ### MaybeAllValuesShorthandProperty Represents CSS shorthand properties that accept one to four values, following the \[CSS shorthand syntax]\(https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand\_properties#edges\_of\_a\_box). Supports specifying values for all four sides: top, right, bottom, and left. - \`T\`: Single value that applies to all four sides. - \`${T} ${T}\`: Two values for block axis (top/bottom) and inline axis (left/right). - \`${T} ${T} ${T}\`: Three values for block-start (top), inline axis (left/right), and block-end (bottom). - \`${T} ${T} ${T} ${T}\`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left). ```ts T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}` ``` ### SpacingKeyword ```ts SizeKeyword | "none" ``` ### SizeKeyword The design system's size scale, used to control the dimensions of components like avatars, icons, and thumbnails. Values range from \`"small-500"\` (smallest) through \`"base"\` (standard) to \`"large-500"\` (largest). Not all components support every size — check the component's \`size\` property type for its available options. ```ts "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500" ``` ### MaybeTwoValuesShorthandProperty Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values. - \`T\`: Single value that applies to both dimensions. - \`${T} ${T}\`: Two values for block axis (vertical) and inline axis (horizontal). ```ts T | `${T} ${T}` ``` ### SizeUnitsOrNone Represents size values that can also be set to \`none\` to remove the size constraint. - \`SizeUnits\`: Specific size values in pixels, percentages, or zero for precise control. - \`none\`: No size constraint, allowing unlimited growth. Learn more about the \[none value]\(https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#none). ```ts SizeUnits | "none" ``` ### PaddingKeyword Defines the padding size for elements, using the standard size scale or \`none\` for no padding. - \`SizeKeyword\`: Standard padding sizes from the size scale for consistent spacing. - \`none\`: No padding. ```ts SizeKeyword | "none" ``` *** ## Examples ### Arrange items in a row Set `direction="inline"` to arrange elements horizontally. This example places a [badge](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/badge), order number, and date in a single row with centered alignment. ## Arrange items in a row ![Four product images arranged horizontally in a row using inline stack layout.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/stack-default-CO-lvcid.png) ## html ```html ``` ### Stack elements vertically Use `direction="block"` (the default) to stack elements from top to bottom. This example lists address lines with consistent vertical spacing. ## html ```html Shipping address Jane Smith 123 Main St Toronto, ON M5V 2H1 Canada ``` ### Distribute items with equal spacing Set `justify-content="space-between"` to push elements to opposite ends of the stack. This example creates a header row with a heading on the left and a badge on the right. ## html ```html Order #1042 Delivered ``` *** ## Best practices * **Use smaller gaps for related items**: Apply `small-200` or `small-100` gaps between tightly related elements like label-value pairs, and `base` or 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. ***