<!-- badge1-->
<div class="Badge-type">Text with a badge
    <span class="Badge-count txt-bdg">4</span>
</div>
<br />
<!-- badge2-->
<div class="Badge-type">Text with large badge
    <span class="Badge-count txt-lr-bdg ">1</span>
</div>
<br />
<!-- badge3-->
<div class="Badge-type">Button with a badge on the left
    <button class="badge-btn btn-left-bdg ">Action</button>
    <span class="Badge-count btn-bdg ">8</span>
</div>
<br />
<!-- badge4-->
<div class="Badge-type">Button toggles badge visibility
    <button class="badge-btn btn-hide-bdg ">Hide</button>
    <span class="Badge-count hide-bdg">9</span>
</div>
<br />
<!-- badge5 -->
<div class="Badge-type">Icon with a badge
    <span class="icon-badge ">
        <i class="fas fa-home home-icon"></i>
    </span>
    <span class="Badge-count icon-bdg-cnt">+15</span>
</div>