Avatar

                 
                  <img class="img-big img-utils" alt="avatar-big" src="--enter--your--source" width="128" height="128" />

                
                  <img class="img-medium img-utils" alt="avatar-medium" src="--enter--your--source" width="96" height="96"/>

              
                <img class="img-small img-utils" alt="avatar-small" src="--enter--your--source" width="64" height="64 "/>

              
                <img class="img-ex-small img-utils" alt="avatar-extra-small" src="--enter--your--source" width="32" height="32" />

Alerts

This is an success alert - check it out!

                  
                    <div class="alerts__success alerts--common center--margin alert--reduce-width">
                      <span class="alerts--margin--common">
                        <img src="./svgs/success-alert.svg" alt="success_icon" />
                      </span>
                      This is an success alert - check it out!
                    </div>

This is an error alert - check it out!

                  
                    <div class="alerts__error alerts--common alert--reduce-width center--margin">
                      <span class="alerts--margin--common">
                        <img src="./svgs/error-alert.svg" alt="error_icon" />
                      </span>
                      This is an error alert - check it out!
                    </div>

This is an warning alert - check it out!

                  
                    <div class="alerts__warning alerts--common alert--reduce-width" >
                      <span class="alerts--margin--common">
                        <img src="./svgs/warning-alert.svg" alt="warning_icon" />
                      </span>
                      This is an warning alert - check it out!
                    </div>

This is an info alert - check it out!

                  
                    <div class="alerts__info alerts--common alert--reduce-width">
                      <span class="alerts--margin--common">
                      <img src="./svgs/info-alert.svg" alt="info_icon" />
                      </span>
                      This is an info alert - check it out!
                    </div>

Badge

              
              <a href="#" class="badge-icon">
                <img src="./svgs/black-cart.svg" alt="cart" />
                <span class="num-badge cart-badge">10</span>
              </a>

              
              <a href="#" class="badge-icon">
                <img src="./svgs/black-heart.svg" alt="heart" />
                <span class="num-badge wishlist-badge">10</span>
              </a>

              
              <a href="#" class="badge-icon">
                <img src="./svgs/black-bell.svg" alt="bell" />
                <span class="num-badge notif-badge">10</span>
              </a>

           
        <div class="avatar-comp">
          <img
            class="img-big badge-utils"
            alt="avatar-large"
            src="../resources/man.svg"
            width="96"
            height="96"
          />
          <span class="avatar-badge avatar-badge-large"></span>
        </div>

          
        <div class="avatar-comp">
          <img
            class="img-medium badge-utils"
            alt="avatar-medium"
            src="../resources/man.svg"
            width="64"
            height="64"
          />
          <span class="avatar-badge avatar-badge-medium"></span>
        </div>

          
        <div class="avatar-comp">
          <img
            class="img-small badge-utils"
            alt="avatar-medium"
            src="../resources/man.svg"
            width="48"
            height="48"
          />
          <span class="avatar-badge avatar-badge-small"></span>
        </div>

          
        <div class="avatar-comp">
          <img
            class="img-ex-small badge-utils"
            alt="avatar-extra-small"
            src="../resources/man.svg"
            width="32"
            height="32"
          />
          <span class="avatar-badge avatar-badge-ex-small"></span>
        </div>

Buttons

                
                  <button class="button__primary">ADD TO CART</button>

                
                  <button class="button__secondary">ADD TO CART</button>

                
                  <button class="button__primary button--round">ADD TO CART</button>

                
                  <button class="button__secondary button--round">ADD TO CART</button>

Twitter

Facebook

Github

                
                  <a href="#" class="button__link-button button--round">
                    <span class="svg--right-margin">
                      <!-- put your choice of svg here -->
                    </span>
                      <!-- put your text -->
                  </a>

                
                  <button class="icon__button icon__cart">
                    <img src="./svgs/white-cart.svg" alt="cart_icon" />
                  </button>

                
                  <button class="icon__button icon__heart">
                    <img src="./svgs/white-heart.svg" alt="heart_icon" />
                  </button>

                
                  <button class="icon__button icon__home">
                    <img src="./svgs/white-home.svg" alt="home_icon" />
                  </button>

                
                  <button class="icon__button icon__profile">
                    <img src="./svgs/white-profile.svg" alt="profile_icon" />
                  </button>

                 
                
                  <button class="floating__button">
                    <!-- put your choice of svg here -->
                  </button>

Cards

Lorem ipsum Lorem ipsum dolor sit Lorem

4.5 ₹ 2500

                
                  <div class="product-container">
                    <a href="#" class="product-info">
                      <span class="product__img__container">
                        <img
                          class="product-img product-info__img"
                          src="https://source.unsplash.com/random/"
                          alt="product"
                        />
                        <button class="wish-btn">
                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
                        </button>
                      </span>
                      Lorem ipsum
                      <span class="product-info__small">Lorem ipsum dolor sit Lorem</span>
                      <span class="product-info__rating">
                        <img src="./svgs/rating.svg" alt="rating_icon" />
                        4.5
                      </span>
                      <span class="price-tag">₹ 2500</span>
                    </a>
                </div>

lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, veniam! Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, ipsa.

4.5 Rs. 250

                
                  <div class="product-container">
                      
                      <a href="#" class="product-info">
                      <span class="product__img__container">
                        <button class="close-btn">
                          <img src="./svgs/close-btn.svg" alt="close_btn" />
                        </button>
                        <img
                          class="product-img product-info__img"
                          src="https://source.unsplash.com/random/"
                          alt="product"
                        />
                        <button class="wish-btn">
                          <img src="./svgs/product-wish.svg" alt="wish_btn" />
                        </button>
                      </span>
                        Lorem ipsum
                        <span class="product-info__small"
                          >Lorem ipsum dolor sit Lorem</span
                        >
                        <span class="product-info__rating">
                          <img src="./svgs/rating.svg" alt="rating_icon" />
                          4.5
                        </span>
                        <span class="price-tag">Rs. 250</span></a
                      >
                      
                      <button class="primary-btn">ADD TO CART</button>
                  </div>

lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, veniam! Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, ipsa.

4.5 Rs. 250

OUT OF STOCK

                
                  <div class="product-container">
                  <a href="#" class="product-info">
                    <span class="product__img__container">
                      <img
                        class="product-img product-info__img"
                        src="https://source.unsplash.com/random/"
                        alt="product"
                      />
                      <button class="wish-btn">
                        <img src="./svgs/product-wish.svg" alt="wish_btn" />
                      </button>
                    </span>
                    <span class="product-info__text"
                      >lorem ipsum Lorem ipsum dolor sit amet consectetur
                      adipisicing elit. Distinctio, veniam!</span
                    >
                    <span class="product-info__small"
                      >Lorem ipsum dolor sit Lorem Lorem, ipsum dolor sit amet
                      consectetur adipisicing elit. Quisquam, ipsa.</span
                    >
                    <span class="product-info__rating">
                      <img src="./svgs/rating.svg" alt="rating_icon" />
                      4.5
                    </span>
                    <span class="price-tag">Rs. 250</span>
                  </a>
                  <button class="primary-btn">ADD TO CART</button>
                  <div class="overlay-div">
                    <button class="close-btn">
                      <img src="./svgs/close-btn.svg" alt="close-btn" />
                    </button>
                    <span class="overlay-text"> OUT OF STOCK </span>
                  </div>
                </div>

CARD TITLE

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

                
                  <div class="text-card">
                    <h4 class="text-card-title">---card title---</h4>
                    <p class="text-card-info">
                      --- enter your text here ---
                    </p>
                  </div>

Lorem ipsum

Lorem ipsum dolor sit amet. Rs. 250

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, nulla. Lorem ipsum dolor sit amet.

                  
                    <div class="horizontal-product-container">
                      <a href="#" class="product-info hcard-product-info">
                        <img
                          class="product-img hcard-img"
                          src="https://source.unsplash.com/random/"
                          alt="product"
                      /></a>
                      <div class="second-horizontal-section">
                        <div class="hsection_info">
                          <h3 class="hcard-title">Lorem ipsum</h3>
                          <small class="hcard-title-desc"
                            >Lorem ipsum dolor sit amet.</small
                          >
                          <span class="price-tag hcard-price">Rs. 250</span>
                          <p class="hcard-product-desc">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit.
                            Explicabo, nulla. Lorem ipsum dolor sit amet.
                          </p>
                        </div>
                        <button class="primary-btn horizontal-primary-btn">
                          ADD TO CART
                        </button>
                        <button class="wish-btn hcard-wish-btn">
                          <img src="./svgs/wish-btn.svg" alt="wish-btn" />
                        </button>
                      </div>
                    </div>

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet consectetur adipisicing.

RATING

                
                  <div class="shadow_card">
                    <a href="#" class="shadow_card__productimgLink">
                      <img
                        class="product-img shadow_card__productimg"
                        src="https://source.unsplash.com/random"
                        alt="product"
                      />
                    </a>
                    <div class="shadow_card__product-info">
                      <div class="shadow_card__product-header">
                        <h3 class="shadow_card__product-title">
                          Lorem ipsum dolor sit
                        </h3>
                        <small class="font-family"
                          >Lorem ipsum dolor sit amet consectetur
                          adipisicing.</small
                        >
                      </div>
                      <div class="shadow_card__product-rating">
                        <span
                          class="shadow_card__product-rating__title font-family"
                          >RATING</span
                        >
                        <img src="./svgs/star.svg" alt="star_icon" />
                        <img src="./svgs/star.svg" alt="star_icon" />
                        <img src="./svgs/star.svg" alt="star_icon" />
                        <img src="./svgs/star.svg" alt="star_icon" />
                        <img src="./svgs/star.svg" alt="star_icon" />
                      </div>
                      <button class="primary-btn shadow_card--btn">
                        ADD TO CART
                      </button>
                      <button class="shadow_card--wishbtn">
                        <img src="./svgs/wish-btn.svg" alt="wish_btn" />
                      </button>
                    </div>
                </div>

Image

                  
                  <img
                    class="responsive-img"
                    src="https://source.unsplash.com/random"
                    alt="round_img"
                  />

                  
                    <img
                      class="responsive-img img-round"
                      src="https://source.unsplash.com/random"
                      alt="round_img"
                    />

Inputs

        
          <input
            type="text"
            class="input__text input--common"
            placeholder="Enter Your Name"
            value="hello,world"
            required
          />

        
           <input
            type="email"
            class="input__email input--common"
            placeholder="Enter Email"
            required
          />

                
                  <input
                    type="password"
                    class="input_password input--common"
                    placeholder="Enter Password(must be 8 chars long)"
                    pattern=".{8,}"
                    required
                  />

Lists

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5
List Item 6

                  
                      <ul class="spaced-list">
                        <li class="spaced-list__item">List Item 1</li>
                        <li class="spaced-list__item">List Item 2</li>
                        <li class="spaced-list__item">List Item 3</li>
                        <li class="spaced-list__item">List Item 4</li>
                        <li class="spaced-list__item">List Item 5</li>
                        <li class="spaced-list__item">List Item 6</li>
                      </ul>

Lorem ipsum dolor sit amet.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
Lorem, ipsum dolor sit amet consectetur adipisicing elit.

          
             <ul class="stacked-list">
                <li class="stacked-list__item info--item">
                    <img src="../svgs/info-alert.svg" alt="info_icon" />
                    <span class="stacked-list__right">
                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
                    <small
                        >Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit.</small
                    >
                    </span>
                </li>
                <li class="stacked-list__item error--item">
                    <img src="../svgs/error-alert.svg" alt="info_icon" />
                    <span class="stacked-list__right">
                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
                    <small
                        >Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit.</small
                    >
                    </span>
                </li>
                <li class="stacked-list__item warning--item">
                    <img src="../svgs/exclamation.svg" alt="info_icon" />
                    <span class="stacked-list__right">
                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
                    <small
                        >Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit.</small
                    >
                    </span>
                </li>
                <li class="stacked-list__item success--item">
                    <img src="../svgs/success-alert.svg" alt="info_icon" />
                    <span class="stacked-list__right">
                    <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
                    <small
                        >Lorem, ipsum dolor sit amet consectetur adipisicing
                        elit.</small
                    >
                    </span>
                </li>
            </ul>

                
                  <nav class="navbar-component">
                    <div class="navbar-component__menu">
                      <button class="navbar-component__menu__btn">
                        <img src="./svgs/menu-btn.svg" alt="menu-btn" />
                      </button>
                      <div class="navbar-component__menu_social">
                        <a href="#" class="navbar-component__menu__social__github">
                          <img src="./svgs/nav-github.svg" alt="nav-github-icon" />
                        </a>
                        <a href="#" class="navbar-component__menu__social__twitter">
                          <img src="./svgs/nav-twitter.svg" alt="nav-github-icon" />
                        </a>
                      </div>
                    </div>
                    <div class="navbar-component__title">
                      <span class="navbar-component__title__text">UNDEFINED</span>
                    </div>
                </nav>

Modal

             
                <div id="modal" class="modal">
                    <section class="modal__article">
                    <header class="modal__article__header">
                        <h2 class="modal__article__header__text">Modal Title</h2>
                        <button class="modal__close-btn" onclick="{}">
                            <img src="../svgs/close-btn.svg" alt="close_btn" />
                        </button>

                    </header>
                    <div class="modal__article__info">
                        <p>
                            --- enter you modal text ---
                        </p>
                    </div>
                    <footer class="modal__article__footer">
                        <button id="close-modal"class="button__primary button--round" onclick="{}">Close</button>
                    <button class="button__primary button--round">
                        Secondary Action
                    </button>
  
                    </footer>
                    </section>
                </div>

Rating

4.5

                  
                    <span class="rating">
                        <img
                            src="../svgs/rating.svg"
                            class="rating__icon"
                            alt="rating_icon"
                        />
                        4.5
                    </span>

Slider

                  
                    <input type="range" class="slider" />

Two Column Grid

Lorem ipsum Lorem ipsum dolor sit Lorem

4.5 ₹ 2500

Lorem ipsum Lorem ipsum dolor sit Lorem

4.5 ₹ 2500

              
                <div class="two-col-grid">
                --- Enter your element here ---
                </div>

Three Column Grid

Lorem ipsum Lorem ipsum dolor sit Lorem

4.5 ₹ 2500

Lorem ipsum Lorem ipsum dolor sit Lorem

4.5 ₹ 2500

Lorem ipsum Lorem ipsum dolor sit Lorem

4.5 ₹ 2500

              
                <div class="three-col-grid">
                    --- enter your elements here ---
                </div>

Text Utilities

I'm Heading
I'm Small
I'm Gray
I'm Center

              
                <h1 class="heading">I'm Heading</h1>

              
                <p class="small-text">I'm Small</p>

              
                <p class="gray-text">I'm Gray</p>

              
                <p class="center-text">I'm Center</p>

Snackbar

Lorem ipsum dolor sit amet.

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

                  
                      <div id="snackbar-item" class="snackbar">
                          <li class="stacked-list__item info--item">
                          <img src="../svgs/info-alert.svg" alt="info_icon" />
                          <span class="stacked-list__right">
                              <h3 class="stacked-list__title">Lorem ipsum dolor sit amet.</h3>
                              <small
                              >Lorem, ipsum dolor sit amet consectetur adipisicing elit.</small
                              >
                          </span>
                          </li>
                          <button class="snackbar__close-btn" onclick="closeSnackbar()">
                          <img src="../svgs/close-btn.svg" alt="close_btn" />
                          </button>
                      </div>

Avatar

Alerts

Badge

Buttons

Cards

CARD TITLE

Lorem ipsum

Lorem ipsum dolor sit

Image

Inputs

Lists

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Navigation

Modal

Rating

Slider

Two Column Grid

Three Column Grid

Text Utilities

I'm Heading

Snackbar

Lorem ipsum dolor sit amet.