<!-- round badge on h1 sized text -->
         <div class="badge-container">
             <h1 class="badge-text">Heading h1 with badge
                 <span class="badge-on-text badge-round">2</span>
             </h1>
         </div>

         <!-- round badge on h2 sized text -->
         <div class="badge-container">
             <h2 class="badge-text">Heading h2 with badge
                 <span class="badge-on-text badge-round">2</span>
             </h2>
         </div>

         <!-- square badge on h3 sized text -->
         <div class="badge-container">
             <h3 class="badge-text">Heading h3 with badge
                 <span class="badge-on-text badge-square">2</span>
             </h3>
         </div>

         <!-- square badge on h4 sized text -->
         <div class="badge-container">
             <h4 class="badge-text">Heading h4 with badge
                 <span class="badge-on-text badge-square">2</span>
             </h4>
         </div>