U

Starling

Badge

generates a small badge at the bottom-left / bottom-right of an avatar and at the top-right of an icon.

Note: I have set the root font-size to 10px for this library.

Instructions to import the Badge component in your CSS or HTML: 

// CSS
@import url("https://starlingui.netlify.app/utils/color.css");
@import url("https://starlingui.netlify.app/pages/components/badge/badge.css");
// HTML
<link rel="stylesheet" href="https://starlingui.netlify.app/utils/color.css">
<link rel="stylesheet" href="https://starlingui.netlify.app/pages/components/badge/badge.css">

Status & Icon Badge

has 4 sizes, 3 colors and 2 position options:

bd_red
bd_green
bd_gray
 
bd_left: left position
bd_xl: 3.5rem
bd_lg: 3rem
bd_md: 2.5rem
bd_sm: 2rem
demo avatar
demo avatar
demo avatar
demo avatar
demo avatar
8
888+
<div class="sui_avatar av_xl">
  <img src=".." alt=".." />
  <!-- Left position | XL size | Red color -->
  <i class="av_badge bd_left bd_xl bd_red"></i>
</div>

<div class="sui_avatar">
  <img src=".." alt=".." />
  <!-- Top-Right position | Red color -->
  <div class="bd_num bd_red">8</div>
</div>

Square Status Badge

similar to the Status Badge, with a different shape:

demo avatar
demo avatar
demo avatar
demo avatar
demo avatar 
<div class="sui_avatar av_xl av_square">
  <img src=".." alt=".." />
  <!-- Left position | XL size | Red color -->
  <i class="av_badge bd_left bd_xl bd_red"></i>
</div>

<div class="sui_avatar av_lg av_square">
  <img src=".." alt=".." />
  <!-- L size | Gray color -->
  <i class="av_badge bd_lg bd_gray"></i>
</div>