Cluster

Use the hds-cluster class to arrange elements inline with even spacing, allowing items to wrap when space is limited.

Cluster is a set of layout utility classes to help you organize content that can adapt to any device or screen size. 

<div class="hds-cluster">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<!-- We'll vary the div sizes to show the flow of cluster elements -->
<style>
  .hds-cluster div:empty:nth-child(3n) {
    min-inline-size: 6rem;
  }
  .hds-cluster div:empty:nth-child(3n + 2) {
    min-inline-size: 8rem;
  }
</style>

Examples

Clusters are great for inline lists and aligning items of varying sizes.

Link 1 Link 2 Link 3 Link 4 
<div class="hds-cluster">
  <sl-icon name="arrow-right"></sl-icon>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

Align Items

By default, items are centered in the block direction of the sl-cluster container. You can add any of the following hds-align-items-* classes to an element with sl-cluster to specify how items are aligned in the block direction:

  • hds-align-items-start
  • hds-align-items-end
  • hds-align-items-center
  • hds-align-items-stretch
  • hds-align-items-baseline
<div class="hds-stack">
  <div class="hds-cluster hds-align-items-start" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="hds-cluster hds-align-items-end" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="hds-cluster hds-align-items-center" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="hds-cluster hds-align-items-stretch" style="min-height: 8rem;">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Gap

By default, the gap between cluster items uses --hds-space-3x from your theme. You can add any of the following hds-gap-* classes to an element with sl-cluster to specify the gap between items:

  • hds-gap-0
  • hds-gap-xs
  • hds-gap-sm
  • hds-gap-base
  • hds-gap-lg
  • hds-gap-xl
<div class="hds-stack">
  <div class="hds-cluster hds-gap-xs">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="hds-cluster hds-gap-xl">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>