Stack is a utility component for aligning content.
UsagePermalink to: Usage
Stack is a utility component for aligning content along a column.
When to usePermalink to: When to use
Use Stack to quickly build small blocks of content which need to render on top of each other.
When not to usePermalink to: When not to use
- Stack is intended for small blocks of content. It's not recommended for layout at a page-level.
- Stack uses flexbox(external link) under the hood. To escape unexpected behaviour related to how flex containers affect their children, each child passed to Stack is wrapped in a div. Because of this, Stack cannot currently be used in scenarios which require direct descendants to the container, such as building a list with role="list"(external link) and role="listitem"(external link).
ExamplesPermalink to: Examples
AlignmentPermalink to: Alignment
Stack supports aligning all its child content across the inline direction.
Title
Some text
Title
Some text
Title
Some text
Open
import { Button } from "@peakon/bedrock/react/button";
import { Heading2, BodyText } from "@peakon/bedrock/react/typography";
import { Stack } from "@peakon/bedrock/react/layout";
<Stack alignInline="stretch">
<Stack alignInline="start">
<Heading2 level={2}>Title</Heading2>
<BodyText>Some text</BodyText>
<Button variant="secondary" size="small">
Do something
</Button>
</Stack>
<Stack alignInline="center">
<Heading2 level={2}>Title</Heading2>
<BodyText>Some text</BodyText>
<Button variant="secondary" size="small">
Do something
</Button>
</Stack>
<Stack alignInline="end">
<Heading2 level={2}>Title</Heading2>
<BodyText>Some text</BodyText>
<Button variant="secondary" size="small">
Do something
</Button>
</Stack>
</Stack>SpacingPermalink to: Spacing
Stack supports a spacing prop which applies an equal gap between each of its children.
Title
Some text
Open
import { Button } from "@peakon/bedrock/react/button";
import { Heading2, BodyText } from "@peakon/bedrock/react/typography";
import { Stack } from "@peakon/bedrock/react/layout";
<Stack spacing={8}>
<Heading2 level={2}>Title</Heading2>
<BodyText>Some text</BodyText>
<Button variant="secondary" size="small">
Do something
</Button>
</Stack>You can nest Stack components to provide different spacing between visually grouped elements. This can be useful, for example, when you want to consistently align a block of content but provide different spacing to some elements which may be more closely related, such as a heading and description.
Title
Some text
Open
import { Button } from "@peakon/bedrock/react/button";
import { Heading2, BodyText } from "@peakon/bedrock/react/typography";
import { Stack } from "@peakon/bedrock/react/layout";
<Stack spacing={20} alignInline="start">
<Stack spacing={4} alignInline="start">
<Heading2 level={2}>Title</Heading2>
<BodyText>Some text</BodyText>
</Stack>
<Button variant="secondary" size="small">
Do something
</Button>
<Button variant="secondary" size="small">
Do something else
</Button>
</Stack>Responsive spacingPermalink to: Responsive spacing
The spacing prop on Stack supports responsiveness.
To use responsive spacing, instead of providing one value, provide an object with Bedrock breakpoints as the keys and pass the associated spacing as their value. See Bedrock breakpoints for an overview of what each breakpoint maps to.
The only required value is base, which is the default value and applies at 0px. You can choose as many or few breakpoints as required to change padding as the viewport grows in width.
Open
import { Stack } from "@peakon/bedrock/react/layout";
<Stack
spacing={{
base: 0,
xs: 8,
sm: 16,
md: 32,
lg: 48,
xl: 64,
}}
>
<div>Item 1</div>
<div>Item 2</div>
</Stack>Props TablePermalink to: Props Table
StackPermalink to: Stack
Props extend from HTML Div Element(external link), with the omission of className and style
| Name | Type | Description | Default | Required |
|---|---|---|---|---|
children | ReactNode | The contents of the Stack. | — | Yes |
alignInline | start | enter | end | stretch | Determines how the items within Stack will align across the inline direction. | stretch | No |
spacing | 0 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 64 | Determines the gap between each item in the Stack. | — | No |