WUI logo

Stack

Allows user to easily stack elements with space between them.

version

4.1.2

install

yarn add @welcome-ui/stack

usage

import { Stack } from '@welcome-ui/stack'

Usage #

The default use of Stack will stack its children vertically.

<Stack>
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</Stack>

You can change the direction & the spacing.

<Stack direction="row" spacing="xl">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</Stack>

It will ensure that its children are lis when is rendered as an ul or an ol.

<Stack as="ul">
<div>Foo</div>
<div>Bar</div>
<div>Baz</div>
</Stack>

Properties #

NameType(s)DefaultRequired
direction
"row"
"column"
column
spacing
"xxs"
"xs"
"sm"
"md"
"lg"
"xl"
"xxl"
md

Packages #

Dependencies #
Peer dependencies #

Previous

Shape