@elemental-ui-alpha/cluster
v0.0.2
Published
The cluster primitive is used to layout items that wrap within a parent container.
Downloads
23
Readme
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>