+
+
+
+
+
+
+
+
+
+
+
+
+ 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!
+
+
+
+ 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!
+
+
+
+ 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!
+
+
+
+ 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!
+
+
+
+ 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>
+
+
+
+
+
+
+
+ 
+ 
+ 
+
+
+ <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 +
+ + +
+
+
+
+
+
+
+
+
+
+
+ 
+ 4.5
+
+
+ <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>
+
+
+
+
+
+
+
+
+
+
+ <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>
+
+
+
+
+
+
+
+
+ <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. +
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <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>
+
+
+ + Navigation +
+ + + + + ++ 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>
+
+
+
+
+
+
+
+
+ Modal Title
+ +
+
+
+ + Lorem ipsum dolor, sit amet consectetur adipisicing elit. + Accusamus, ducimus odit dolorum quidem sunt molestias + tenetur voluptatum a similique repellendus veniam officiis + asperiores voluptates tempore eveniet voluptas ipsa + consequatur mollitia in ut itaque inventore! Error sunt + fugiat cupiditate est consectetur. Suscipit iste quaerat + dolor odit voluptates repellat maxime provident + consectetur?Lorem ipsum dolor sit, amet consectetur + adipisicing elit. Dolorem impedit aperiam adipisci tenetur + quaerat! Harum laboriosam accusamus cupiditate sequi + adipisci. +
++ Rating +
+ +
+
+
+
+
+
+
+
+ 
+ 4.5
+
+
+
+ 4.5
+
+
+
+ <span class="rating">
+ <img
+ src="../svgs/rating.svg"
+ class="rating__icon"
+ alt="rating_icon"
+ />
+ 4.5
+ </span>
+
+
+ + Slider +
+ + + ++ Two Column Grid +
+ +
+
+
+
+
+
+
+
+
+
+ <div class="two-col-grid">
+ --- Enter your element here ---
+ </div>
+
+
+ + Three Column Grid +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+ <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>
+
+
+ 
+
+
+ 
+