Skip to content

Instantly share code, notes, and snippets.

@tarunsankhla

tarunsankhla/badge,html

Created February 6, 2022 09:05
Show Gist options
  • Save tarunsankhla/07dee7b144bc77422a3b4c5cf062101c to your computer and use it in GitHub Desktop.
Save tarunsankhla/07dee7b144bc77422a3b4c5cf062101c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
badge,html
<div class="content-title">Badges on Icon</div>
<div class="badge-collection">
<div class="badge-container">
<span class="material-icons-round drawer-icons">
inbox
</span>
<div class="badge topright-badge"></div>
</div>
<div class="badge-container">
<span class="material-icons-round drawer-icons">
settings
</span>
<div class="badge badge-sucess topright-badge"></div>
</div>
</div>
<div class="content-title">Badges on Avatar</div>
<div class="badge-collection">
<div class="badge-container">
<img class="avatar avatar-xxlg img-round" src="../assets/Img/robert-bagramov-vZWqy-Y5kTI-unsplash.jpg" alt="" srcset="">
<div class="badge badge-lg badge-warning topright-badge">2</div>
</div>
<div class="badge-container">
<img class="avatar avatar-xlg img-square" src="../assets/Img/pablo-merchan-montes-MXovqM130UI-unsplash.jpg" >
<div class="badge badge-sucess topleft-badge">2</div>
</div>
<div class="badge-container">
<img class="avatar avatar-xlg img-round" src="../assets/Img/christine-siracusa-vzX2rgUbQXM-unsplash.jpg" >
<div class="badge"></div>
</div>
</div>
<div class="content-title">Badge on Button and text</div>
<div class="badge-collection">
<div class="badge-container">
<h2>Hello! this is component Libaray</h2>
<div class="badge badge-lg badge-primary topright-badge">99+</div>
</div>
<div class="badge-container">
<button class="example-button"> Am I a Button ?</button>
<div class="badge badge-md badge-primary topright-badge">2</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment