Balance Logo
Balance
Reckon Design System

Cluster

The cluster primitive is used to layout items that wrap within a parent container.
Install
pnpm add @reckon-web/cluster
Import usage
import {
Cluster
} from '@reckon-web/cluster';
  • Code
  • API

Usage

Use the Cluster component when you want to layout a group of elements together and allow them to wrap onto a new line.

Open in Playroom

This is particularly useful when you want the elements to naturally fill the horizontal space available, rather than implementing a specific grid. A good example of this might be a "tag cloud".

Reckon
Web
Design
System

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">
{/* items */}
</Cluster>

See how the available gap sizes interact with many elements:

gap: "medium"

Align

For elements of varying heights you may want to influence how they're vertically aligned. Use the align property:

  • center
  • end
  • start
  • stretch (default)
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.