@elemental-ui-alpha/stack v0.0.2

Stack

import { Stack } from '@elemental-ui-alpha/stack';

Gap

The gap property defines how much space there should be between each element in the stack. Available gap sizes are:

• none (default)
• xxsmall
• xsmall
• small
• medium
• large
• xlarge
• xxlarge

<Stack gap="small">
  <Box background="shade" padding="xlarge" />
  <Box background="dim" padding="xlarge" />
  <Box background="shade" padding="xlarge" />
</Stack>

Direction

Stacks can also be distributed along the horizontal axis.

Note that items within a "horizontal" stack will not wrap. If you need items to wrap, consider using the Cluster layout primitive.

<Stack gap="small" direction="horizontal">
  <Box background="shade" padding="xlarge" />
  <Box background="dim" padding="xlarge" />
  <Box background="shade" padding="xlarge" />
</Stack>

Dividers

Use the dividers property to separate each element in the stack with a divider. Available divider options are:

• none (default)
• between
• around
• start
• end

<Stack gap="small" dividers="between">
  <Box>first</Box>
  <Box>second</Box>
  <Box>third</Box>
</Stack>