@ulu/frontend/lib/scss/components/_badge.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
  description: A standard badge with text.
-->
<div class="badge">
  <div class="badge__inner">
    <span>JS</span>
  </div>
</div>

<!-- @ulu-demo
  title: Badge Sizes
  description: Demonstrating small, default, and large badge variants.
-->
<div style="display: flex; gap: 1rem; align-items: center;">
  <div class="badge badge--small">
    <div class="badge__inner">
      <span>SM</span>
    </div>
  </div>
  <div class="badge">
    <div class="badge__inner">
      <span>MD</span>
    </div>
  </div>
  <div class="badge badge--large">
    <div class="badge__inner">
      <span>LG</span>
    </div>
  </div>
</div>

<!-- @ulu-demo
  title: Clickable Badge with Image
  description: A badge containing an image that scales on hover.
-->
<a href="#" class="badge">
  <div class="badge__inner">
    <img src="https://picsum.photos/id/64/300/300" alt="Profile Image">
  </div>
</a>