@spark-web/stack v5.0.0
title: Stack storybookPath: page-layout-stack--default
isExperimentalPackage: false
Used to distribute children vertically, with even spacing between each child.
<Stack gap="large">
<Placeholder />
<Placeholder />
<Placeholder />
</Stack>
Examples
Gap
The spacing between children can be adjusted using the gap
prop.
<Columns gap="xxlarge">
<Stack gap="small">
<Placeholder />
<Placeholder />
<Placeholder />
</Stack>
<Stack gap="medium">
<Placeholder />
<Placeholder />
<Placeholder />
</Stack>
<Stack gap="large">
<Placeholder />
<Placeholder />
<Placeholder />
</Stack>
<Stack gap="xlarge">
<Placeholder />
<Placeholder />
<Placeholder />
</Stack>
</Columns>
Horizontal alignment
Items can be aligned horizontally using the align
prop.
<Stack gap="medium" dividers>
<Stack gap="small" align="left">
<Placeholder />
<Placeholder label="left" width={128} />
<Placeholder />
</Stack>
<Stack gap="small" align="center">
<Placeholder />
<Placeholder label="center" width={128} />
<Placeholder />
</Stack>
<Stack gap="small" align="right">
<Placeholder />
<Placeholder label="right" width={128} />
<Placeholder />
</Stack>
</Stack>
Dividers
Use the dividers
property to render a Divider between each
element in the Stack.
<Stack gap="medium" dividers>
<Text>First item</Text>
<Text>Second item</Text>
<Text>Third item</Text>
</Stack>
Nesting
Nest Stack components to create more complex white space rules.
<Stack gap="xlarge">
<Heading level="4">Heading</Heading>
<Stack gap="small">
<Text>Line 1</Text>
<Text>Line 2</Text>
<Text>Line 3</Text>
</Stack>
<Stack gap="small">
<Text>Line 1</Text>
<Text>Line 2</Text>
<Text>Line 3</Text>
</Stack>
</Stack>
Props
Stack
props also include Box
props and are not listed here
(excludes display
, className
, alignItems
, flexDirection
,
justifyContent
and flexWrap
).
Extra props are also passed into the underlying Box
component.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago