We recommend using the grid layout component instead of the Stack component.
Interactive demo
This demo allows you to preview the stack, its variations, and configuration options.
1import React from 'react';
2import { Stack } from 'newskit';
3
4export default () => (
5 <Stack
6 flow="vertical-left"
7 stackDistribution="flex-start"
8 spaceInline=""
9 spaceStack=""
10 height="100%"
11 wrap="nowrap"
12 ariaLabel="list content label"
13 />
14);
15
Anatomy
The stack is comprised of one required element and one optional element
| Item | Name | Description | Component | Optional |
|---|
Overview
The stack specifies the layout of its children components and can be used to quickly and easily layout elements on a page without needing to write any CSS. Auto-layout is the equivalent of a stack in Figma.
Distribution
Its children can be distributed by using the ‘distribution’ property, which is a direct mapping to the flexbox property justify-content
1<Stack
2 flow="horizontal-center"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="flex-start"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="flex-end"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="space-around"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="space-between"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="space-evenly"
4>
5 ...
6</Stack>Flow
The stack supports eight different flows: four vertical and four horizontal. For elements to expand on the cross-axis, they will need to be either display:flex or display:flex-inline.
1<Stack
2 flow="horizontal-stretch"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-top"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-center"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-bottom"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-left"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-center"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-right"
3 stackDistribution="center"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-stretch"
3 stackDistribution="center"
4>
5 ...
6</Stack>Wrap
The stack has the ability to wrap elements to prevent them from overflowing.
1<Stack
2 wrap="wrap"
3 flow="horizontal-top"
4>
5 ...
6</Stack>1<Stack
2 wrap="wrap"
3 flow="vertical-left"
4>
5 ...
6</Stack>Spacing
The stack supports adding a fixed space between its children and rows of children when the stack is wrapping spaceInline will be applied in the flow of the elements.
1<Stack
2 flow="horizontal-top"
3 spaceInline="space040"
4>
5 ...
6</Stack>1<Stack
2 flow="horizontal-top"
3 spaceStack="space040"
4 width="150px"
5 wrap="wrap"
6>
7 ...
8</Stack>1<Stack
2 flow="vertical-left"
3 spaceInline="space040"
4>
5 ...
6</Stack>1<Stack
2 flow="vertical-left"
3 spaceStack="space040"
4 height="150px"
5 wrap="wrap"
6>
7 ...
8</Stack>Ordering
The stack supports the ability to define the order of the elements within the stack.
1<Stack flow="horizontal-center">
2 <StackChild order={2}>
3 <StackItem>1</StackItem>
4 </StackChild>
5 <StackChild order={3}>
6 <StackItem>2</StackItem>
7 </StackChild>
8 <StackChild order={1}>
9 <StackItem>3</StackItem>
10 </StackChild>
11</Stack>Reverse
The stack supports the ability to be reversed
1<Stack flowReverse flow="horizontal-center">
2 <StackItem>1</StackItem>
3 <StackItem>2</StackItem>
4 <StackItem>3</StackItem>
5</Stack>StackChild
The StackChild provides a utility that allows items to be placed out of order. This is particularly useful for building accessible interfaces. It is required for the component to be used within a stack. Its behaviour is derived from the functionality of a child element in a classic flexbox container .
1<Stack flow="horizontal-center">
2 <StackChild>
3 <StackItem>1</StackItem>
4 </StackChild>
5 <StackChild>
6 <StackItem>2</StackItem>
7 </StackChild>
8 <StackChild>
9 <StackItem>3</StackItem>
10 </StackChild>
11</Stack>Accessibility considerations
The stack can be used to build accessible interfaces.
| Element | Attribute | Value | Description | User supplied |
|---|
StackChild can accept an order prop to visually display elements in a different order than they appear on the DOM, while preserving the tab order.
API
The stack has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|
The stackChild has a range of props that can be used to define an appropriate experience for different use cases.
| Name | Type | Default | Description | Required |
|---|