@ulu/frontend/lib/scss/components/_badge-stack.demo.html

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

<!-- @ulu-demo
  title: Basic Badge Stack
  description: Overlapping text-based badges.
-->
<ul class="badge-stack">
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>JD</span></span>
    </span>
  </li>
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>MS</span></span>
    </span>
  </li>
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>AJ</span></span>
    </span>
  </li>
  <li class="badge-stack__item">
    <span class="badge badge--small">
      <span class="badge__inner"><span>+3</span></span>
    </span>
  </li>
</ul>

<!-- @ulu-demo
  title: Clickable Image Stack
  description: A stack of clickable user profiles with images.
-->
<ul class="badge-stack">
  <li class="badge-stack__item">
    <a href="#" class="badge badge--small badge--clickable">
      <div class="badge__inner">
        <img src="https://picsum.photos/id/64/100/100" alt="User 1">
      </div>
    </a>
  </li>
  <li class="badge-stack__item">
    <a href="#" class="badge badge--small badge--clickable">
      <div class="badge__inner">
        <img src="https://picsum.photos/id/65/100/100" alt="User 2">
      </div>
    </a>
  </li>
  <li class="badge-stack__item">
    <a href="#" class="badge badge--small badge--clickable">
      <div class="badge__inner">
        <img src="https://picsum.photos/id/66/100/100" alt="User 3">
      </div>
    </a>
  </li>
</ul>