Cluster

.cluster SCSS Utility

What it does

The .cluster class creates a flexible horizontal layout for grouping items together with consistent spacing.

• Uses display: flex for horizontal alignment
• Allows items to wrap onto multiple lines (flex-wrap: wrap)
• Adds a uniform gap (gap: 1rem) between items

How to use

1. Add the class to a container:

   <div class="cluster">
     <button>Button 1</button>
     <button>Button 2</button>
     <button>Button 3</button>
   </div>
   

2. Customize the gap (optional):

   <div class="cluster" style="gap: 2rem;">
     <!-- items -->
   </div>
   

Example

<div class="cluster">
  <span>Tag 1</span>
  <span>Tag 2</span>
  <span>Tag 3</span>
</div>

Result:
All child elements are displayed in a row with equal spacing, and will wrap to a new line if there isn’t enough horizontal space. This is useful for button groups, tags, or any horizontal list of items.

HTML Code (Demo)

<div class="cluster">
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
</div>

Configuration

{
  "headline": "Cluster"
}