Ribbon

Add ribbon in left or right any element.

Installation

Add ribbon element in card, pricing or other element with paste following code.

Large

              
                <!-- ribbon left lg-->
                <div class="ribbon ribbon-lg ribbon-start z-index-10">
                  <span class="bg-success">Large</span>
                </div>
                <!-- ribbon right lg-->
                <div class="ribbon ribbon-lg ribbon-end z-index-10">
                  <span class="bg-success">Large</span>
                </div>

Medium

              
                <!-- ribbon left md-->
                <div class="ribbon ribbon-md ribbon-start z-index-10">
                  <span class="bg-success">Medium</span>
                </div>
                <!-- ribbon right md-->
                <div class="ribbon ribbon-md ribbon-end z-index-10">
                  <span class="bg-success">Medium</span>
                </div>

Small

              
                <!-- ribbon left sm-->
                <div class="ribbon ribbon-sm ribbon-start z-index-10">
                  <span class="bg-success">Small</span>
                </div>
                <!-- ribbon right sm-->
                <div class="ribbon ribbon-sm ribbon-end z-index-10">
                  <span class="bg-success">Small</span>
                </div>

Dont forget to add position relative in parent this code

Example ribbon in Pricing section