`Stack` is a utility component that can be used to create a stack of elements with a consistent gap between them. It supports both vertical and horizontal orientations.
It uses layout tokens from the Carbon Design System to define the gap between elements. The default gap is `1`, which is equivalent to `0.125rem` (`2px`).
The `gap` scale can be set from `1` to `13`:
1: 0.125rem (2px)
2: 0.25rem (4px)
3: 0.5rem (8px)
4: 0.75rem (12px)
5: 1rem (16px)
6: 1.5rem (24px)
7: 2rem (32px)
8: 2.5rem (40px)
9: 3rem (48px)
10: 4rem (64px)
11: 5rem (80px)
12: 6rem (96px)
13: 10rem (160px)
Alternatively, you can specify an arbitrary `gap` value (e.g., `200px`).
## Vertical (gap 1)
By default, the `Stack` component has a vertical orientation and a gap scale of `1`.
Item 1
Item 2
Item 3
## Vertical (gap 2)
Item 1
Item 2
Item 3
## Vertical (gap 3)
Item 1
Item 2
Item 3
## Vertical (gap 4)
Item 1
Item 2
Item 3
## Vertical (gap 5)
Item 1
Item 2
Item 3
## Vertical (gap 6)
Item 1
Item 2
Item 3
## Vertical (gap 7)
Item 1
Item 2
Item 3
## Vertical (gap 8)
Item 1
Item 2
Item 3
## Vertical (gap 9)
Item 1
Item 2
Item 3
## Vertical (gap 10)
Item 1
Item 2
Item 3
## Vertical (gap 11)
Item 1
Item 2
Item 3
## Vertical (gap 12)
Item 1
Item 2
Item 3
## Vertical (gap 13)
Item 1
Item 2
Item 3
## Vertical (custom value)
Item 1
Item 2
Item 3
## Vertical (custom element)
By default, the `Stack` component uses a `div` element. You can specify a different element using the `as` prop.
Item 1
Item 2
Item 3
## Horizontal (gap 1)
Set the `orientation` prop to `horizontal` to create a horizontal stack.
Item 1
Item 2
Item 3
## Horizontal (gap 2)
Item 1
Item 2
Item 3
## Horizontal (gap 3)
Item 1
Item 2
Item 3
## Horizontal (gap 4)
Item 1
Item 2
Item 3
## Horizontal (gap 5)
Item 1
Item 2
Item 3
## Horizontal (gap 6)
Item 1
Item 2
Item 3
## Horizontal (gap 7)
Item 1
Item 2
Item 3
## Horizontal (gap 8)
Item 1
Item 2
Item 3
## Horizontal (gap 9)
Item 1
Item 2
Item 3
## Horizontal (gap 10)
Item 1
Item 2
Item 3
## Horizontal (gap 11)
Item 1
Item 2
Item 3
## Horizontal (gap 12)
Item 1
Item 2
Item 3
## Horizontal (gap 13)
Item 1
Item 2
Item 3
## Horizontal (custom value)
Item 1
Item 2
Item 3
## Horizontal (custom element)
By default, the `Stack` component uses a `div` element. You can specify a different element using the `as` prop.
Item 1
Item 2
Item 3