Skip to main content
Parsley Design Systems logoParsley Design System - sample

Cluster

Examples

Default

Cluster container 1

Cluster container 2 example content

Cluster container 3

Cluster container 4 example content

Code

1<Cluster>
2    <Box>Cluster container 1</Box>
3    <Box>Cluster container 2 example content</Box>
4    <Box>Cluster container 3</Box>
5    <Box>Cluster container 4 example content</Box>
6</Cluster>

With gap applied

Cluster container 1

Cluster container 2 example content

Cluster container 3

Cluster container 4 example content

Code

1<Cluster gap="--s2">
2    <Box>Cluster container 1</Box>
3    <Box>Cluster container 2 example content</Box>
4    <Box>Cluster container 3</Box>
5    <Box>Cluster container 4 example content</Box>
6</Cluster>

With justify content set

Cluster container 1

Cluster container 2 example content

Cluster container 3

Cluster container 4 example content

Code

1<Cluster gap="--s2" justifyContent="space-evenly">
2    <Box>Cluster container 1</Box>
3    <Box>Cluster container 2 example content</Box>
4    <Box>Cluster container 3</Box>
5    <Box>Cluster container 4 example content</Box>
6</Cluster>

As a polymorphic element

  • Cluster container 1

  • Cluster container 2 example content

  • Cluster container 3

  • Cluster container 4 example content

Code

1<Cluster as="ul" gap="--s2">
2    <li>Cluster container 1</li>
3    <li>Cluster container 2 example content</li>
4    <li>Cluster container 3</li>
5    <li>Cluster container 4 example content</li>
6</Cluster>