Use Case

A Vertical Stack allows you to vertically align child elements.

Properties

Background Style

Determines the background style

Gap

Adjust spacing between child widgets.

Padding

Adjust the padding (the spacing between the stack border and it’s child widgets).

Overflow

Decide what happens when child widgets are larger than stack container.

Horizontal Alignment

This specifies how child elements will be aligned horizontally.

Border Style

This specifies the preferred border style.

Border Size

This specifies the preferred border style

Border Radius

Describes how rounded the container’s edges should look.

Max. Height

Adjusts the maximum container height. Values can be a number(size in px, e.g. 5), a ‘number%'(e.g. 5%) or ‘fill'(which takes up all available space). Invalid size entry will default to fill.

Min. Height

Adjusts the minimum container height. Values can be a number(size in px, e.g. 5), a ‘number%'(e.g. 5%) or ‘fill'(which takes up all available space). Invalid size entry will default to fill.

Max. Width

Adjusts the maximum container width. Values can be a number(size in px, e.g. 5), a ‘number%'(e.g. 5%) or ‘fill'(which takes up all available space). Invalid size entry will default to fill.

Min. Width

Adjusts the minimum container width. Values can be a number(size in px, e.g. 5), a ‘number%'(e.g. 5%) or ‘fill'(which takes up all available space). Invalid size entry will default to fill.

Accessibility Label

A label used for buyers using assistive technologies. When set, any nested UI Blocks in this component will not be announced to screen reader users.

Accessibility Role

This will be used by assistive technologies to help buyers navigate the page.

All Widgets and their children use cart conditionals to help hide/show based on conditions. Click here to learn more.