Cluster

Import: @bnotk/dsx/css/cluster.css

Live Preview

Classes

Class	Description
`.dsx-cluster__container`	Flex container for multiple cluster segments
`.dsx-cluster__container--empty`	Empty placeholder container
`.dsx-cluster`	Base cluster segment
`.dsx-cluster__content`	Inner layout for badge and label
`.dsx-cluster__content-size`	Circular count badge
`.dsx-cluster__content-label`	Segment label
`.dsx-cluster--filter`	Filled filter-style variant
`.dsx-cluster--light-blue`, `.dsx-cluster--blue`, `.dsx-cluster--yellow`, `.dsx-cluster--lime`, `.dsx-cluster--coral`, `.dsx-cluster--green`, `.dsx-cluster--navy`	Color variants

Examples

<div class="dsx-cluster__container" role="group" aria-label="Category distribution">
  <div class="dsx-cluster dsx-cluster--navy" style="flex: 4" tabindex="0">
    <div class="dsx-cluster__content">
      <span class="dsx-cluster__content-size">4</span>
      <span class="dsx-cluster__content-label">Category A</span>
    </div>
  </div>
  <div class="dsx-cluster dsx-cluster--coral" style="flex: 2" tabindex="0">
    <div class="dsx-cluster__content">
      <span class="dsx-cluster__content-size">2</span>
      <span class="dsx-cluster__content-label">Category B</span>
    </div>
  </div>
</div>