A layout helper component that creates a vertical stack layout with gutters (spacing) between each item.
Full docs at: bedrock-layout.dev
The Stack
component literally stacks its child components on top of each other, while maintaining a consistent spacing between them.
npm install @bedrock-layout/stack
or
yarn add @bedrock-layout/stack
import { Stack } from '@bedrock-layout/stack';
<Stack gutter='size3'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</Stack>;
For styling purposes, you can select data-bedrock-stack
.
* required
Property | Description | Type | Default |
---|---|---|---|
gutter* | Sets the space between each child component | one of Spacing ** |
- |
** By default, Spacing
is one of the spacing-constants values, but this can be overwritten using the ThemeProvider
from @bedrock-layout/spacing-constants