Snippets Collections

Recent | Popular

view_listList view view_moduleGrid view
content_copy

Badge on Icon

@Krishna2296 

                
      <p><i class="material-icons">home</i> <span class="badge-count">2</span></p>
      <p><i class="material-icons">notifications</i><span class="badge-count">4</span></p>
      <p><i class="material-icons">shopping_cart</i><span class="badge-count">18</span</p>
      <p><i class="material-icons">email</i><span class="badge-count">5</span></p>
content_copy

Badge on Button

@Krishna2296 

       <a><span class="badge-btn">Home</span><span class="badge-count">2</span> </a>
       <a><span class="badge-btn">Inbox</span><span class="badge-count">4</span></a>
       <a><span class="badge-btn">Cart</span><span class="badge-count">18</span></a>
       <a><span class="badge-btn">Email</span><span class="badge-count">5</span></a>
content_copy

floating button

@bhakti1801 

   <!-- floating action button -->
<button class="floating-action-btn"><i class="fas fa-chevron-up"></i></button>
content_copy

buttons primary

@Shrushti 

   <button class="btn btn-primary">Primary</button>
   <button class="btn btn-secondary">Secondary</button>
   <button class="btn btn-success">Success</button>
   <button class="btn btn-danger">Danger</button>
   <button class="btn btn-warning">Warning</button>
   <button class="btn btn-info">Info</button>
content_copy

card-css-variables

@mohitdhatrak 

--card-box-shadow: none;
--card-hover-box-shadow: 0px 0px 20px 1px #808080;
--card-bg-color: transparent; /* bg stands for background */
--card-border: 1px solid #000;
--card-border-radius: 1em;
--card-image-border: 1px solid #000;
--card-image-border-radius: 0.5em;
--card-image-text-overlay-color: #fff;
--card-primary-button-color: #000;
--card-primary-button-bg-color: #bae6fd;
--card-primary-button-border: none;
--card-primary-button-border-radius: 0.6em;
--card-button-hover-border-radius: none;
--card-secondary-button-color: #000; /* i.e. card icon buttons */
--card-secondary-button-bg-color: none;
--card-secondary-button-border: none;
--card-secondary-button-border-radius: 0.6em;
--card-button-hover-color: #7dd3fc;
--card-icon-size: 1.4rem;
--card-badge-bg-color: #bae6fd;
--card-badge-border: 1px solid #000;
--card-badge-border-radius: 0.5em;
--card-badge-color: #000;
--card-button-focus-outline-color: #3b82f6; 
/* focus color is seen when you use tab key to access buttons or links*/
content_copy

outline buttons

@Shrushti 

 <button class="btn btn-outline-primary">Primary</button>
 <button class="btn btn-outline-secondary">Secondary</button>
 <button class="btn btn-outline-success">Success</button>
 <button class="btn btn-outline-danger">Danger</button>
 <button class="btn btn-outline-warning">Warning</button>
 <button class="btn btn-outline-info">Info</button>
content_copy

icn buttons

@Shrushti 

   <button class="btn btn-icon"><i class="fa fa-save"></i></button>
   <button class="btn btn-icon"><i class="fa fa-times"></i></button>
   <button class="btn btn-icon"><i class="fa fa-bars"></i></button>
   <button class="btn btn-icon"><i class="fa fa-home"></i></button>
content_copy

floating action btns

@Shrushti 

  <button class="btn btn-floating-action"><i class="fa fa-plus"></i></button>
  <button class="btn btn-floating-action"><i class="fa fa-comments"></i></button>
  <button class="btn btn-floating-action"><i class="fa fa-camera"></i></button>
content_copy

icon btns

@Shrushti 

  <button class="btn btn-icon"><i class="fa fa-save"></i> Save</button>
  <button class="btn btn-icon"><i class="fa fa-times"></i> Close</button>
  <button class="btn btn-icon"><i class="fa fa-bars"></i> Menu</button>
  <button class="btn btn-icon"><i class="fa fa-home"></i> Home</button>
content_copy

btn icons

@Shrushti 

  <button class="btn btn-icon"><i class="fa fa-save"></i></button>
        <button class="btn btn-icon"><i class="fa fa-times"></i></button>
        <button class="btn btn-icon"><i class="fa fa-bars"></i></button>
        <button class="btn btn-icon"><i class="fa fa-home"></i></button>
content_copy

btn icons

@Shrushti 

  <button class="btn btn-icon"><i class="fa fa-save"></i></button>
  <button class="btn btn-icon"><i class="fa fa-times"></i></button>
  <button class="btn btn-icon"><i class="fa fa-bars"></i></button>
  <button class="btn btn-icon"><i class="fa fa-home"></i></button>
content_copy

link btn

@Shrushti 

   <button class="btn btn-link"><a class="link-text" href="link">Link</a></button>
content_copy

disabled btn

@Shrushti 

 <button class="btn" disabled>Disabled Button</button>
content_copy

Badge

@Tushar 

<img class="badge-image" src="https://picturepan2.github.io/spectre/img/avatar-2.png" alt="Avatar">
<div class="badge-status online"></div>

<img class="badge-image" src="https://picturepan2.github.io/spectre/img/avatar-1.png" alt="Avatar">
<div class="badge-status offline"></div>

<img class="badge-image" src="https://picturepan2.github.io/spectre/img/avatar-3.png" alt="Avatar">
<div class="badge-status with-num">3</div>
content_copy

Exclusive Link for using Inclusive UI

@dheerajpurohit 

<!-- Exclusive Link for using Inclusive UI -->
<link rel="stylesheet" href="https://inclusive-ui.app/components/inclusive-ui.css">
<!-- Font Awesome Link used in Design Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
content_copy

Avatar

@Tushar 

 <img class="avatar-image" src="https://picturepan2.github.io/spectre/img/avatar-2.png"
   alt="Avatar">
 <img class="avatar-image" src="https://picturepan2.github.io/spectre/img/avatar-3.png"
   alt="Avatar">
 <img class="avatar-image" src="https://picturepan2.github.io/spectre/img/avatar-1.png"
   alt="Avatar">
content_copy

AVatar

@Tushar 

<img class="extra-large-avatar" src="https://picturepan2.github.io/spectre/img/avatar-2.png" alt="Avatar">
<img class="large-avatar" src="https://picturepan2.github.io/spectre/img/avatar-3.png" alt="Avatar">
<img class="medium-avatar" src="https://picturepan2.github.io/spectre/img/avatar-1.png" alt="Avatar">
<img class="small-avatar" src="https://picturepan2.github.io/spectre/img/avatar-5.png" alt="Avatar">
content_copy

Floating action buttons

@AnishJakka 

  <a href="" class="float_action sm-gutter sm-padding full-brr para-sm-xs"><i class="fas fa-plus"></i>
  </a>


  <a href="" class="float_action sm-padding sm-gutter full-brr para-sm-xs"><i class="fas fa-bars"></i>
  </a>
content_copy

Btn with txt and icon

@AnishJakka 

 <a href="" class="primary-btn sm-gutter xs-padding sm-brr para-sm-xs"><span><i class="fas fa-envelope xs-gutter"></i>Email</span>
 </a>

 <a href="" class="primary-btn xs-padding sm-gutter sm-brr para-sm-xs"><span><i class="fas fa-wrench xs-gutter"></i>Settings</span>
 </a>
content_copy

Code

@rutvikumak 

<link rel="stylesheet" href="https://boostmat-ui.netlify.app/components/component.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
content_copy

Slider

@AnishJakka 

 <label for="slider" class="para-md xs-padding label-display">Slider</label>
 <input type="range" name="input1" class="range-input img-lg" min="0" max="100" />
content_copy

card-type-1-only-icons

@mohitdhatrak 

<div class="card card-vertical card-only-icons">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="" alt="" class="card-image" />
            <header class="card-header-container">
                <h1 class="card-heading">
                    Tokyo Olympics 2020
                </h1>
                <p class="card-subheading">
                    by Mohit Dhatrak
                </p>
            </header>
        </div>
        <p class="card-text">
            The Tokyo 2020...
        </p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">Read</button>
            <button class="card-button">Bookmark</button>
        </div>
        <div class="card-secondary-buttons-container">
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    favorite_border
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    share
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    more_vert
                </i>
            </button>
        </div>
    </div>
</div>
content_copy

card-type-1-only-buttons

@mohitdhatrak 

<div class="card card-vertical card-only-buttons">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="" alt="" class="card-image" />
            <header class="card-header-container">
                <h1 class="card-heading">
                    Tokyo Olympics 2020
                </h1>
                <p class="card-subheading">
                    by Mohit Dhatrak
                </p>
            </header>
        </div>
        <p class="card-text">
            The Tokyo 2020...
        </p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">Read</button>
            <button class="card-button">Bookmark</button>
        </div>
        <div class="card-secondary-buttons-container">
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    favorite_border
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    share
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    more_vert
                </i>
            </button>
        </div>
    </div>
</div>
content_copy

card-type-1-text-overlay

@mohitdhatrak 

<div class="card card-vertical card-text-overlay">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="" alt="" class="card-image" />
            <header class="card-header-container">
                <h1 class="card-heading">
                    Tokyo Olympics 2020
                </h1>
                <p class="card-subheading">
                    by Mohit Dhatrak
                </p>
            </header>
        </div>
        <p class="card-text">
            The Tokyo 2020...
        </p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">Read</button>
            <button class="card-button">Bookmark</button>
        </div>
        <div class="card-secondary-buttons-container">
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    favorite_border
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    share
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    more_vert
                </i>
            </button>
        </div>
    </div>
</div>
content_copy

BAdge

@Tushar 

<i class="fas fa-shopping-cart badge-icon"></i>
<div class="badge-notifi">5</div>
<i class="fas fa-envelope badge-icon"></i>
<div class="badge-notifi">6</div>
content_copy

card-type-1-only-text

@mohitdhatrak 

<div class="card card-vertical card-only-text">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="" alt="" class="card-image" />
            <header class="card-header-container">
                <h1 class="card-heading">
                    Tokyo Olympics 2020
                </h1>
                <p class="card-subheading">
                    by Mohit Dhatrak
                </p>
            </header>
        </div>
        <p class="card-text">
            The Tokyo 2020...
        </p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">Read</button>
            <button class="card-button">Bookmark</button>
        </div>
        <div class="card-secondary-buttons-container">
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    favorite_border
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    share
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    more_vert
                </i>
            </button>
        </div>
    </div>
</div>
content_copy

card-type-2-badge

@mohitdhatrak 

<div class="card card-vertical card-with-badge">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="" alt="" class="card-image" />
            <span class="card-badge">Bestseller</span>
            <div class="card-secondary-buttons-container">
                <button class="card-button">
                    <i class="material-icons card-svg-icons">
                        favorite_border
                    </i>
                </button>
            </div>
            <header class="card-header-container">
                <h1 class="card-heading">
                    Classic Boxing Bag
                </h1>
                <p class="card-subheading">
                    Description: 50 Kg ...
                </p>
            </header>
        </div>
        <p class="card-text">₹1200 (40% off)</p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">
                Add to cart
            </button>
        </div>
    </div>
</div>
content_copy

card-type-3-dismiss

@mohitdhatrak 

<div class="card card-vertical card-with-dismiss">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="/Images/boxing-bag.jpg" alt="Boxing Bag" class="card-image" />
            <span class="card-badge">Bestseller</span>
            <div class="card-secondary-buttons-container">
                <button class="card-button">
                    <i class="material-icons card-svg-icons">
                        highlight_off
                    </i>
                </button>
            </div>
            <header class="card-header-container">
                <h1 class="card-heading">
                    Classic Boxing Bag
                </h1>
                <p class="card-subheading">
                    Description: 50 Kg ...
                </p>
            </header>
        </div>
        <p class="card-text">₹1200 (40% off)</p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">
                Add to wishlist
            </button>
        </div>
    </div>
</div>
content_copy

alert short

@indoUI 

        <!-- success alert -->
        <div class="alert-success">
            <i class="fas fa-check-circle alert-icon"></i>
            <span class="p-md">Success alert.</span>
        </div>

        <!-- info alert -->
        <div class="alert-info">
            <i class="fas fa-info-circle alert-icon"></i>
            <span class="p-md">Info alert.</span>
        </div>

        <!-- warning alert -->
        <div class="alert-warning">
            <i class="fas fa-exclamation-triangle alert-icon"></i>
            <span class="p-md">Warning alert.</span>
        </div>

        <!-- error alert -->
        <div class="alert-error">
            <i class="fas fa-exclamation-circle alert-icon"></i>
            <span class="p-md">Error alert.</span>
        </div>
content_copy

alert

@anshulraheja 

<div class="alert primary-alert">
    <h5>Simple Alert Message</h5>
    <a class="close-btn"><i class="fas fa-times"></i></a>
</div>

<div class="alert success-alert">
    <h5>Success Alert Message</h5>
    <a class="close-btn"><i class="fas fa-times"></i></a>
</div>

<div class="alert danger-alert">
    <h5>Danger Alert Message</h5>
    <a class="close-btn"><i class="fas fa-times"></i></a>
</div>

<div class="alert warning-alert">
    <h5>Warning Alert Message</h5>
    <a class="close-btn"><i class="fas fa-times"></i></a>
</div>
open_in_new

Personal_Projects-PP-/Analyzing Thanksgiving Dinner.ipynb at master · tusharsinghsuryavanshi/Personal_Projects-PP-

@Tushar_Singh

https://github.com/tusharsinghsuryavanshi/Personal_Projects-PP-/blob/master/Analyzing Thanksgiving Dinner.ipynb
content_copy

card-type-1-horizontal

@mohitdhatrak 

<div class="card card-horizontal card-basic">
    <div class="card-body">
        <div class="card-image-header-container">
            <img src="" alt="" class="card-image" />
            <header class="card-header-container">
                <h1 class="card-heading">
                    Tokyo Olympics 2020
                </h1>
                <p class="card-subheading">
                    by Mohit Dhatrak
                </p>
            </header>
        </div>
        <p class="card-text">
            The Tokyo 2020...
        </p>
    </div>
    <div class="card-footer">
        <div class="card-primary-buttons-container">
            <button class="card-button">Read</button>
            <button class="card-button">Bookmark</button>
        </div>
        <div class="card-secondary-buttons-container">
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    favorite_border
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    share
                </i>
            </button>
            <button class="card-button">
                <i class="material-icons card-svg-icons">
                    more_vert
                </i>
            </button>
        </div>
    </div>
</div>
content_copy

avatars

@CR 

<img class="avatar sm" src="https://avatars.dicebear.com/api/bottts/x4.svg" alt="avatar1" />
<img class="avatar md" src="https://i.pravatar.cc/150?img=37" alt="avatar2" />
<img class="avatar lg" src="https://avatars.dicebear.com/api/avataaars/x18.svg" alt="avatar3" />
content_copy

avatars with initials

@CR 

<div class="avatar sm">CR</div>
<div class="avatar md">CR</div>
<div class="avatar lg">CR</div>
content_copy

square avatars

@CR 

<img class="avatar square sm" src="https://avatars.dicebear.com/api/bottts/x4.svg" alt="avatar" />
<img class="avatar square md" src="https://i.pravatar.cc/150?img=37" alt="avatar" />
<img class="avatar square lg" src="https://avatars.dicebear.com/api/avataaars/x18.svg" alt="avatar" />
content_copy

alert dess

@indoUI 

         <!-- success alert -->
         <div class="alert-des-success">
             <i class="fas fa-check-circle alert-icon"></i>
             <div>
                 <p>Success</p>
                 <p class="p-md">
                     This is a success alert -
                     <a href=""><button class="btn secondary-text-btn-sm">
                             check it out!
                         </button></a>
                 </p>
             </div>
         </div>

         <!-- info alert -->
         <div class="alert-des-info">
             <i class="fas fa-info-circle alert-icon"></i>
             <div>
                 <p>Info</p>
                 <p class="p-md">
                     This is a info alert -
                     <a href=""><button class="btn secondary-text-btn-sm">check it out!
                         </button></a>
                 </p>
             </div>
         </div>

         <!-- warning alert -->
         <div class="alert-des-warning">
             <i class="fas fa-exclamation-triangle alert-icon"></i>
             <div>
                 <p>Warning</p>
                 <p class="p-md">
                     This is a warning alert -
                     <a href=""><button class="btn secondary-text-btn-sm">check it out!
                         </button></a>
                 </p>
             </div>
         </div>

         <!-- error alert -->
         <div class="alert-des-error">
             <i class="fas fa-exclamation-circle alert-icon"></i>
             <div class="alert-w-btn-text">
                 <p>Error</p>
                 <p class="p-md">
                     This is a error alert - <button class="btn secondary-text-btn-sm">
                         check it out!
                     </button>
                 </p>
             </div>
         </div>
content_copy

alert cta

@indoUI 

         <!-- success alert with dismiss button -->
         <div class="alert-success-btn">
             <div class="alert-text">
                 <i class="fas fa-check-circle alert-icon"></i>
                 <span class="p-md">Success alert.</span>
             </div>
             <div class="alert-close">
                 <i class="fas fa-times-circle"></i>
             </div>
         </div>

         <!-- success alert with undo button -->
         <div class="alert-success-btn">
             <div class="alert-text">
                 <i class="fas fa-check-circle alert-icon"></i>
                 <span class="p-md">Success alert.</span>
             </div>
             <div class="undo">
                 <button class="btn secondary-text-btn-sm">UNDO</button>
             </div>
         </div>

         <!-- error alert with undo button -->
         <div class="alert-error-btn">
             <div class="alert-text">
                 <i class="fas fa-exclamation-circle alert-icon"></i>
                 <span class="p-md">Wrong input!</span>
             </div>
             <div class="undo">
                 <button class="btn secondary-text-btn-sm">UNDO</button>
             </div>
         </div>
content_copy

btn

@indoUI 

         <!-- primary button -->
         <button class="btn primary-btn-md">Primary</button>

         <!-- secondary button -->
         <button class="btn secondary-btn-md">Secondary</button>

         <!-- disabled button -->
         <button class="btn disabled-btn-md" disabled="disabled">Disabled</button>
content_copy

btn outline

@indoUI 

         <!-- primary outline button -->
         <button class="btn primary-outline-btn-md">Primary</button>

         <!-- secondary outline button -->
         <button class="btn secondary-outline-btn-md">Secondary</button>
content_copy

text btn

@indoUI 

         <!-- primary outline button -->
         <a href=""><button class="btn primary-text-btn-md">Primary Text</button></a>

         <!-- secondary outline button -->
         <a href=""><button class="btn secondary-text-btn-md">Secondary Text</button></a>
content_copy

icon btn

@indoUI 

         <!-- cart icon button -->
         <button class="btn icon-btn-md">
             <i class="fas fa-shopping-cart"></i></button>

         <!-- trash icon button -->
         <button class="btn icon-btn-md">
             <i class="fas fa-trash"></i></button>

         <!-- history icon button -->
         <button class="btn icon-btn-md">
             <i class="fas fa-history"></i></button>
content_copy

label icon btn

@indoUI 

         <!-- labelled cart icon button -->
         <button class="btn label-icon-btn-md">
             <i class="fas fa-shopping-cart"></i>&nbsp; Add to cart</button>

         <!-- labelled save icon button -->
         <button class="btn label-icon-btn-md">
             <i class="fas fa-save"></i>&nbsp; Save</button>

         <!-- labelled trash icon button -->
         <button class="btn label-icon-outline-btn-md">
             <i class="fas fa-trash"></i>&nbsp; Delete</button>
content_copy

floating icon btn

@indoUI 

         <!-- floating cart icon button -->
         <a href=""><button class="btn floating-btn-sm">
                 <i class="fas fa-shopping-cart"></i></button>
         </a>

         <!-- floating plus icon button -->
         <a href=""><button class="btn floating-btn-sm">
                 <i class="fas fa-plus"></i></button>
         </a>

         <!-- floating location icon button -->
         <a href=""><button class="btn floating-btn-sm">
                 <i class="fas fa-location-arrow"></i></button>
         </a>
content_copy

avatar

@indoUI 

           <!-- round round large size image avatar -->
            <div class="avatar avatar-lg-round">
              <img loading="lazy" src="..." alt="avatar-image"
                class="img-responsive" />
            </div>

            <!-- round medium size image avatar -->
            <div class="avatar avatar-md-round">
              <img loading="lazy" src="..." alt="avatar-image"
                class="img-responsive" />
            </div>

            <!-- round small size image avatar -->
            <div class="avatar avatar-sm-round">
              <img loading="lazy" src="..." alt="avatar-image"
                class="img-responsive" />
            </div>

            <!-- round extra-small size image avatar -->
            <div class="avatar avatar-xsm-round">
              <img loading="lazy" src="..." alt="avatar-image"
                class="img-responsive" />
            </div>
content_copy

avatar letter

@indoUI 

            <!-- round large size letter avatar -->
            <div class="avatar text-avatar-lg-round">IN</div>

            <!-- round medium size letter avatar -->
            <div class="avatar text-avatar-md-round">IN</div>

            <!-- round small size letter avatar -->
            <div class="avatar text-avatar-sm-round">IN</div>

            <!-- round extra-small size letter avatar -->
            <div class="avatar text-avatar-xsm-round">IN</div>
content_copy

avatar with status badge

@indoUI 

           <!-- round large size avatar image with offline-status badge -->
           <div class="badge-container">
               <div class="avatar avatar-lg-round"><img loading="lazy" src="..." alt="avatar-image" class="img-responsive" />
               </div>
               <span class="status-badge status-offline"></span>
           </div>

           <!-- round medium size avatar letter with online badge -->
           <div class="badge-container">
               <div class="avatar text-avatar-md-round">IN</div>
               <span class="status-badge status-online"></span>
           </div>

           <!-- round small size avatar image with away-status badge -->
           <div class="badge-container">
               <div class="avatar avatar-sm-round"><img loading="lazy" src="..." alt="avatar-image" class="img-responsive" />
               </div>
               <span class="status-badge status-away"></span>
           </div>

           <!-- round extra-small size avatar image with offline badge -->
           <div class="badge-container">
               <div class="avatar avatar-xsm-round"><img loading="lazy" src="..." alt="avatar-image" class="img-responsive" />
               </div>
               <span class="status-badge status-offline"></span>
           </div>
content_copy

badge on text

@indoUI 

         <!-- 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>
content_copy

badge on icon

@indoUI 

         <!-- badge on cart icon -->
         <div class="badge-container">
             <button class="btn badge-icon-btn-lg">
                 <i class="fas fa-shopping-cart"><span class="badge-on-icon">2</span></i>
             </button>
         </div>

         <!-- badge on envelope/mail icon -->
         <div class="badge-container">
             <button class="btn badge-icon-btn-lg">
                 <i class="fas fa-envelope"><span class="badge-on-icon">12</span></i>
             </button>
         </div>

         <!-- badge on envelope/mail icon -->
         <div class="badge-container">
             <button class="btn badge-icon-btn-lg">
                 <i class="fas fa-envelope"><span class="badge-on-icon">25+</span></i>
             </button>
         </div>

         <!-- badge on envelope/mail icon -->
         <div class="badge-container">
             <button class="btn badge-icon-btn-lg">
                 <i class="fas fa-envelope"><span class="badge-on-icon">215+</span></i>
             </button>
         </div>
content_copy

badge on btn

@indoUI 

         <!-- badge on outline button -->
         <div class="badge-container">
             <button class="btn primary-outline-btn-md">Hide
                 <span class="badge-on-btn ">7</span>
             </button>
         </div>

         <!-- badge on secondary solid button -->
         <div class="badge-container">
             <button class="btn secondary-btn-md">Hide
               	<span class="badge-on-btn ">2</span>
             </button>
         </div>
content_copy

w/o dismiss vertical light card

@indoUI 

           <div class="card-vertical card-light">
               <div class="card-img-container">
                   <img src="..." alt="product-image" />
               </div>
               <div class="card-text">
                   <h1 class="card-title title-sm">Sony DSC W830 Cyber-Shot 20.1 MP Point and Shoot Camera (Black) with 8X Optical Zoom</h1>
                   <h2 class="card-price">10,999/-</h2>
               </div>
               <div class="card-nav">
                   <div class="card-cta-btn">
                       <button class="btn primary-btn-sm add-cart">Add to Cart</button>
                       <div class="card-nav-icon">
                           <button class="btn primary-text-btn-sm icon-md">
                             <i class="far fa-heart"></i>
                           </button>
                           <button class="btn primary-text-btn-sm icon-md">
                             <i class="fas fa-share-alt"></i>
                           </button>
                       </div>
                   </div>
               </div>
           </div>

Badge on Icon
star

Wed Feb 02 2022 15:20:05 GMT+0000 (Coordinated Universal Time)

@Krishna2296

Badge on Button
star

Wed Feb 02 2022 15:25:23 GMT+0000 (Coordinated Universal Time)

@Krishna2296

floating button
star

Wed Feb 02 2022 15:37:09 GMT+0000 (Coordinated Universal Time)

@bhakti1801

buttons primary
star

Wed Feb 02 2022 15:42:00 GMT+0000 (Coordinated Universal Time)

@Shrushti

card-css-variables
star

Wed Feb 02 2022 15:43:18 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

outline buttons
star

Wed Feb 02 2022 15:43:55 GMT+0000 (Coordinated Universal Time)

@Shrushti

icn buttons
star

Wed Feb 02 2022 15:45:31 GMT+0000 (Coordinated Universal Time)

@Shrushti

floating action btns
star

Wed Feb 02 2022 15:46:36 GMT+0000 (Coordinated Universal Time)

@Shrushti

icon btns
star

Wed Feb 02 2022 15:50:21 GMT+0000 (Coordinated Universal Time)

@Shrushti

btn icons
star

Wed Feb 02 2022 15:51:17 GMT+0000 (Coordinated Universal Time)

@Shrushti

btn icons
star

Wed Feb 02 2022 15:53:02 GMT+0000 (Coordinated Universal Time)

@Shrushti

link btn
star

Wed Feb 02 2022 15:54:42 GMT+0000 (Coordinated Universal Time)

@Shrushti

disabled btn
star

Wed Feb 02 2022 15:55:56 GMT+0000 (Coordinated Universal Time)

@Shrushti

Badge
star

Wed Feb 02 2022 16:17:36 GMT+0000 (Coordinated Universal Time) tushar.badge

@Tushar

Exclusive Link for using Inclusive UI
star

Wed Feb 02 2022 16:19:16 GMT+0000 (Coordinated Universal Time)

@dheerajpurohit

Avatar
star

Wed Feb 02 2022 16:31:50 GMT+0000 (Coordinated Universal Time)

@Tushar

AVatar
star

Wed Feb 02 2022 16:33:32 GMT+0000 (Coordinated Universal Time)

@Tushar

Floating action buttons
star

Wed Feb 02 2022 16:36:40 GMT+0000 (Coordinated Universal Time)

@AnishJakka

Btn with txt and icon
star

Wed Feb 02 2022 16:37:52 GMT+0000 (Coordinated Universal Time)

@AnishJakka

Code
star

Wed Feb 02 2022 16:38:10 GMT+0000 (Coordinated Universal Time)

@rutvikumak

Slider
star

Wed Feb 02 2022 16:53:25 GMT+0000 (Coordinated Universal Time)

@AnishJakka

card-type-1-only-icons
star

Wed Feb 02 2022 17:19:53 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

card-type-1-only-buttons
star

Wed Feb 02 2022 17:23:19 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

card-type-1-text-overlay
star

Wed Feb 02 2022 17:30:20 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

BAdge
star

Wed Feb 02 2022 17:32:45 GMT+0000 (Coordinated Universal Time)

@Tushar

card-type-1-only-text
star

Wed Feb 02 2022 17:33:14 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

card-type-2-badge
star

Wed Feb 02 2022 17:38:55 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

card-type-3-dismiss
star

Wed Feb 02 2022 18:01:42 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

alert short
star

Wed Feb 02 2022 18:05:54 GMT+0000 (Coordinated Universal Time)

@indoUI

alert
star

Wed Feb 02 2022 18:13:16 GMT+0000 (Coordinated Universal Time)

@anshulraheja

Personal_Projects-PP-/Analyzing Thanksgiving Dinner.ipynb at master · tusharsinghsuryavanshi/Personal_Projects-PP-
star

Wed Feb 02 2022 18:15:59 GMT+0000 (Coordinated Universal Time) https://github.com/tusharsinghsuryavanshi/Personal_Projects-PP-/blob/master/Analyzing Thanksgiving Dinner.ipynb

@Tushar_Singh

card-type-1-horizontal
star

Wed Feb 02 2022 18:18:15 GMT+0000 (Coordinated Universal Time)

@mohitdhatrak

avatars
star

Wed Feb 02 2022 18:25:39 GMT+0000 (Coordinated Universal Time)

@CR

avatars with initials
star

Wed Feb 02 2022 18:28:08 GMT+0000 (Coordinated Universal Time)

@CR

square avatars
star

Wed Feb 02 2022 18:31:50 GMT+0000 (Coordinated Universal Time)

@CR

alert dess
star

Wed Feb 02 2022 18:35:17 GMT+0000 (Coordinated Universal Time)

@indoUI

alert cta
star

Wed Feb 02 2022 18:37:27 GMT+0000 (Coordinated Universal Time)

@indoUI

btn
star

Wed Feb 02 2022 18:38:22 GMT+0000 (Coordinated Universal Time)

@indoUI

btn outline
star

Wed Feb 02 2022 18:39:36 GMT+0000 (Coordinated Universal Time)

@indoUI

text btn
star

Wed Feb 02 2022 18:40:54 GMT+0000 (Coordinated Universal Time)

@indoUI

icon btn
star

Wed Feb 02 2022 18:41:51 GMT+0000 (Coordinated Universal Time)

@indoUI

label icon btn
star

Wed Feb 02 2022 18:42:35 GMT+0000 (Coordinated Universal Time)

@indoUI

floating icon btn
star

Wed Feb 02 2022 18:43:26 GMT+0000 (Coordinated Universal Time)

@indoUI

avatar
star

Wed Feb 02 2022 18:44:20 GMT+0000 (Coordinated Universal Time)

@indoUI

avatar letter
star

Wed Feb 02 2022 18:54:40 GMT+0000 (Coordinated Universal Time)

@indoUI

avatar with status badge
star

Wed Feb 02 2022 18:56:15 GMT+0000 (Coordinated Universal Time)

@indoUI

badge on text
star

Wed Feb 02 2022 18:57:14 GMT+0000 (Coordinated Universal Time)

@indoUI

badge on icon
star

Wed Feb 02 2022 18:58:12 GMT+0000 (Coordinated Universal Time)

@indoUI

badge on btn
star

Wed Feb 02 2022 19:00:04 GMT+0000 (Coordinated Universal Time)

@indoUI

w/o dismiss vertical light card
star

Wed Feb 02 2022 19:12:20 GMT+0000 (Coordinated Universal Time)

@indoUI

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension