Badge

Badge generates a small badge to the top-right of its child(ren).

@import url(https://vera-ui.netlify.app/styles/badge.css)

<link rel="stylesheet" href="https://vera-ui.netlify.app/styles/badge.css">

Badges on Avatars

Want to make avatars with badges?

<div class="badge-container">
  <div class="badge">
  <figure class="avatar avatar-xl disp-inline">
    <img
      src="..."
      class="avatar avatar-lg"
      alt="..."
    />
  </figure>
  <span class="badge-avatar status-online"></span>
  </div>
  <div class="badge">
    <figure class="avatar avatar-lg disp-inline">
      <img
        src="..."
        class="avatar avatar-lg"
        alt="..."
      />
    </figure>
    <span class="badge-avatar status-away"></span>
  </div>
  <div class="badge">
    <figure class="avatar avatar-std disp-inline">
      <img
        src="..."
        class="avatar avatar-std"
        alt="..."
      />
    </figure>
    <span class="badge-avatar status-dnd"></span>
  </div>
</div>

Badges on Icons

Badges can be implemented on Icons.

shopping_bag 2

notifications 4

<div class="badge-container">
  <div class="badge">
    <span class="material-icons-outlined md-36"> shopping_bag </span>
    <span class="badge-icon number">2</span>
  </div>
  <div class="badge">
    <span class="material-icons-outlined md-36"> notifications </span>
    <span class="badge-icon number">4</span>
  </div>
</div>

Number Badges on Avatars

Want to make avatars with number badges?

<div class="badge-container">
  <div class="badge">
    <figure class="avatar avatar-lg disp-inline">
      <img
        src="..."
        class="avatar avatar-lg"
        alt="..."
      />
    </figure>
    <span class="badge-avatar badge-icon av-number">6</span>
  </div>
  <div class="badge">
    <figure class="avatar avatar-std disp-inline">
      <img
        src="..."
        class="avatar avatar-std"
        alt="..."
      />
    </figure>
    <span class="badge-avatar badge-icon av-number">3</span>
  </div>
</div>