Stack

Stack is a component that allows you to compose elements vertically.

Basic example usage:

                                                
                                                <Stack>
                                                  <div>Block 1</div>
                                                  <div>Block 2</div>
                                                  <div>Block 3</div>
                                                </Stack>

Advanced example usage:

                                                
                                                <Stack elementType="ul" hasIntermediateDividers hasStartDivider hasEndDivider>
                                                  <li>
                                                    <div>List item 1</div>
                                                  </li>
                                                  <li>
                                                    <div>List item 1</div>
                                                  </li>
                                                  <li>
                                                    <div>List item 1</div>
                                                  </li>
                                                </Stack>

Custom Spacing

You can use the spacing prop to apply custom spacing between items. The prop accepts either a spacing token (e.g. space-100) or an object with breakpoint keys and spacing token values.

Default spacing:

                                                
                                                <Stack hasSpacing>{/* Stacked content */}</Stack>

Custom spacing:

                                                
                                                <Stack spacing="space-1200">{/* Stacked content */}</Stack>

Custom responsive spacing:

                                                
                                                <Stack spacing={{ mobile: 'space-400', tablet: 'space-800' }}>{/* Stacked content */}</Stack>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.