@elemental-ui-alpha/cluster v0.0.2

Cluster

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

Align

The align property defines the alignment of items on the vertical axis:

• center
• end
• start
• stretch (default)

<Cluster align="end">
  <Box background="shade" height={50} width={20} />
  <Box background="dim" height={150} width={20} />
  <Box background="shade" height={100} width={20} />
</Cluster>

Gap

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

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

<Cluster gap="medium">
  <Box background="shade" padding="xlarge" width={200} />
  <Box background="shade" padding="xlarge" width={100} />
  <Box background="shade" padding="xlarge" width={50} />
  <Box background="shade" padding="xlarge" width={100} />
  <Box background="shade" padding="xlarge" width={300} />
  <Box background="shade" padding="xlarge" width={100} />
  <Box background="shade" padding="xlarge" width={200} />
  <Box background="shade" padding="xlarge" width={50} />
  <Box background="shade" padding="xlarge" width={100} />
  <Box background="shade" padding="xlarge" width={100} />
</Cluster>