Pattern Library by Cloudy knot

Badge 

<main class="main-wrapper flexbox">
    <div class="badge-relative">
        <a href="#" class="link">お知らせ</a>
        <span class="badge -red">1</span>
    </div>
    <div class="badge-relative">
        <button type="button" class="b-button">お知らせ</button>
        <span class="badge -red">999</span>
    </div>
    <div class="badge-relative">
        <a href="#">
            <img src="https://placehold.jp/0f6bff/ffffff/100x60.png?text=icon" class="image" alt="アイコン画像想定">
        </a>
        <span class="badge -blue -icon-adj">
            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="badge-image svg-inline--fa fa-check" role="img" viewBox="0 0 512 512">
                <path fill="currentColor" d="M480 128c0 8.188-3.125 16.38-9.375 22.62l-256 256C208.4 412.9 200.2 416 192 416s-16.38-3.125-22.62-9.375l-128-128C35.13 272.4 32 264.2 32 256c0-18.28 14.95-32 32-32c8.188 0 16.38 3.125 22.62 9.375L192 338.8l233.4-233.4C431.6 99.13 439.8 96 448 96C465.1 96 480 109.7 480 128z" />
            </svg>
        </span>
    </div>
</main>
 
<main class="main-wrapper flexbox">
  <div class="badge-relative">
    <a href="#" class="link">お知らせ</a>
    <span class="badge -red">1</span>
  </div>
  <div class="badge-relative">
    <button type="button" class="b-button">お知らせ</button>
    <span class="badge -red">999</span>
  </div>
  <div class="badge-relative">
    <a href="#">
      <img src="https://placehold.jp/0f6bff/ffffff/100x60.png?text=icon" class="image" alt="アイコン画像想定">
    </a>
    <span class="badge -blue -icon-adj">
      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="badge-image svg-inline--fa fa-check" role="img" viewBox="0 0 512 512"><path fill="currentColor" d="M480 128c0 8.188-3.125 16.38-9.375 22.62l-256 256C208.4 412.9 200.2 416 192 416s-16.38-3.125-22.62-9.375l-128-128C35.13 272.4 32 264.2 32 256c0-18.28 14.95-32 32-32c8.188 0 16.38 3.125 22.62 9.375L192 338.8l233.4-233.4C431.6 99.13 439.8 96 448 96C465.1 96 480 109.7 480 128z"/></svg>
    </span>
  </div>
</main>
 
/* No context defined. */
  • Content: 
    .badge-relative {
  display: inline-block;
  position: relative;
  width: auto;
  vertical-align: bottom;
}

.nav {
  display: inline-block;
  padding: 16px;
  border: 1px dashed hsl(0deg, 0%, 47%);
  line-height: 1.5;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset-block-start: -12px;
  inset-inline-end: -12px;
  min-width: 26px;
  min-height: 24px;
  padding: 1px 9px;
  color: hsl(0deg, 100%, 100%);
  border-radius: 50px;
}
.badge.-red {
  background-color: hsl(0deg, 100%, 40%);
}
.badge.-blue {
  background-color: hsl(229deg, 73%, 19%);
}
.badge.-icon-adj {
  padding: 1px 5px;
}
.badge.-icon-adj .badge-image {
  height: 24px;
}

.badge-image {
  display: block;
  width: 16px;
  height: 16px;
  fill: hsl(0deg, 100%, 100%);
}
  • URL: /components/raw/badge/style.css
  • Filesystem Path: src/components/1-static-ui/badge/style.css
  • Size: 804 Bytes

No notes defined.