Stack
Stack is a layout utility to group elements and manage spacing between them.

Usage

Stack component is the foundation for the most layouts you would have in your applications. It starts with a simple API for the most popular scenarios as well as it provides techniques to cover more advanced use-cases.

To simply group multiple components with a gap between them – wrap them with Stack.

Content
Content

Direction

Stack works not just for vertical groups of components but also lets you to stack them horizontally by using inline flag. In this case, child elements will get their width defined based on their content.

Content
Content

One of the reasons for having this utility exists is to solve horizontal stacking when components don't fit into their parent width and should be rendered as multiline. In the future this problem will be solved with the CSS gap property, while currently it's implemented using negative margins.

Stack items can be rendered in the reversed order for both, vertical and horizontal stacks.

Item 1
Item 2

Detaching items

Stack doesn't add any additional wrappers to its children wrappers to leverage the flexbox gap property. That works for the most of the cases correctly out-of-the-box. However, there are use cases when you want to have an additional wrapper around the item because of its internal styles. For example, <Button fullWidth /> will behave still try to take full-width.

We provide Stack.Item component to serve as a wrapper:

Content
Content

Item sizes

In addition to just serving as a wrapper, you can use it to achieve flex-grow behavior. Calling Stack.Item with grow property on it will stretch it to take all the space left in that line.

Note: When used in inline stack - this approach will keep all the children displayed in the same line.

Content
Content

For displaying multiple items using percentage width check Grid component.

Gap sizes

You can control gap size of the Stack with gap property going from 0 to 6 or removed completely. These values are using corresponding token values, like arcade-unit-x1.

Content
Content

Dividers

Stack supports separating items with a Divider component with the help of divided property.

Content

Content
Content

Content

Alignment

Stack children can be aligned vertically or horizontally using the flexbox approach with align and justify that are representing align-items and justify-content CSS properties.

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content

Responsive properties

Stack can change some of its properties values dynamically based on the viewport size by passing an array of values. First value is for small viewport size (mobile), second on is for medium (tablet) and third is for large viewport (desktop).

Content
Content

You can either pass the values for all screen sizes, or just for some of them and let it automatically fill the rest according to the mobile first approach. This means that if you pass [false, true] in the example above, Stack will transform this array into [false, true, true] internally and therefore will apply medium viewport value to the large viewport as well.

Properties supporting responsive values:

  • Stack: gap, align, justify, inline, reversed
  • Stack.Item: size, grow

Hiding items

Since Stack wraps every child with a wrapper, passing a child hidden with css will still apply margin to it. To avoid that, Stack works together with a Hidden utility that will keep css display value on the stack item wrapper and display the margins correctly.

Content
Content
Content

Accessibility

Stack can be used in many contexts and therefore might require to be rendered using specific HTML tags, like ul or ol for lists of items. It can be achieved by using as property on both, Stack and Stack.Item.

  • Content
  • Content

Properties

Stack properties:

NameTypeDefaultRequiredComment
inlineResponsive(boolean)-false
reversedResponsive(boolean)-false
dividedboolean-falseSeparate items with divider?
gapResponsive(0, 1, 2, 3, 4, 6)3falseGap multiplier
alignResponsive(start, end, center)-falseFlex align-items
justifyResponsive(start, end, center)-falseFlex justify-content
asstringdivfalseTag used for render
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Stack.Item properties:

NameTypeDefaultRequiredComment
growResponsive(boolean)-falseApply flex-grow
asstringdivfalseTag used for rendering
childrenReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element