Cluster

Introduction

The core idea behind clustering elements is to group them together while maintaining control over their alignment, spacing, and responsiveness. The cluster classes presented here are designed to be easy to understand and use, providing an efficient way to manage elements in various contexts.

Using Cluster

To implement the Cluster layout in your HTML, follow these steps:

1. Add the .cluster class to an HTML element to create a clustered layout. Add an extra element as container within this cluster container. This container is set to a flex display, allowing elements to wrap and align.

<div class="cluster">
  <div>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </div>
</div>

2. To adjust the spacing between elements within the cluster, you can use one of the .cluster-space-* classes. These classes set the --cds-comp-composition-cluster-space variable, which controls the spacing. Choose the class that matches your desired spacing:

List of cluster-space classes

Class	Value
.cluster-space-3xs	--cds-sys-spacing-3xs
.cluster-space-2xs	--cds-sys-spacing-2xs
.cluster-space-xs	--cds-sys-spacing-xs
.cluster-space-s	--cds-sys-spacing-s
.cluster-space-m	--cds-sys-spacing-m
.cluster-space-l	--cds-sys-spacing-l
.cluster-space-xl	--cds-sys-spacing-xl
.cluster-space-2xl	--cds-sys-spacing-2xl
.cluster-space-3xl	--cds-sys-spacing-3xl

For example:

<div class="cluster cluster-space-l">
  <div>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </div>
</div>

.cluster-space-3xs

.cluster-space-2xs

.cluster-space-xs

.cluster-space-s

.cluster-space-m

.cluster-space-l

.cluster-space-xl

.cluster-space-2xl

.cluster-space-3xl

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

The .cluster Class

At the heart of the clustering concept is the .cluster class. When applied to a container element, it activates the clustering behavior. Elements within this container are treated as a cluster. Let's break down the CSS properties applied by the .cluster class:

.cluster > * {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

• display: flex transforms the container and its children into a flex container.
• flex-wrap: wrap ensures that child elements wrap onto the next line when they exceed the container's width.
• justify-content: flex-start aligns the child elements to the left, allowing them to naturally flow from left to right.
• align-items: center centers the children vertically within their rows.

Managing Spacing

The power of clustering also lies in controlling the spacing between elements. To manage spacing, use classes like .cluster-space-3xs, .cluster-space-m, or others. These classes allow you to fine-tune the amount of space between elements.

Here's the essential CSS for managing spacing:

.cluster > * {
  margin: calc(var(--cds-comp-composition-cluster-space, var(--cds-sys-spacing-s)) / 2 * -1);
}

.cluster > * > * {
  margin: calc(var(--cds-comp-composition-cluster-space, var(--cds-sys-spacing-s)) / 2);
}

• The .cluster > * selector handles the negative margin for the cluster elements.
• The .cluster > * > * selector manages the positive margin between individual elements within the cluster.

To adjust the spacing, apply one of the cluster space classes like .cluster-space-2xl, which sets the --cds-comp-composition-cluster-space variable to var(--cds-sys-spacing-2xl). This dynamically changes the spacing to match the desired design, whether you need tight or generous spacing.

Centering the Cluster

If you need to center the content within the cluster, the .cluster.center-content class comes to the rescue:

.cluster.center-content > *,
.cluster.center-content {
  justify-content: center;
}

Applying the .cluster.center-content class centers the content both horizontally and vertically within the cluster, providing a neat and centered layout.

Practical Use Cases

The cluster classes find versatile application in various scenarios. Here are some common use cases:

• Creating flexible grids or card layouts with centered content.
• Designing responsive navigation menus that adjust to different screen sizes.
• Structuring content in a way that optimizes space utilization.
• Building interactive galleries with consistent spacing between images.