Product Card
Each element of the card is interactive. For example:
Click share to activate social sharesClick Quick look to activate Quick Look Modal
Hover favorite to activate tooltip
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating btn-small waves-effect waves-light blue darken-4 top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating btn-small waves-effect waves-light blue darken-4 top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-card.jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn blue darken-4 btn-sm waves-effect waves-light rating">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
Quick look modal
Click meQuick look
Short description
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non porro dolore est beatae iste deleniti eveniet numquam recusandae, deserunt temporibus enim libero magni reiciendis veniam corporis ut atque aperiam rem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non porro dolore est beatae iste deleniti eveniet numquam recusandae, deserunt temporibus enim libero magni reiciendis veniam corporis ut atque aperiam rem?
<!--Activation Button-->
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Click me</a>
<!--/.Activation Button-->
<!-- Modal: QUick look -->
<div class="modal fade" id="quick-look" role="dialog">
<div class="modal-dialog modal-qlook">
<!--Modal content-->
<div class="modal-content">
<!-- Modal header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center">Quick look </h4>
</div>
<!-- /.Modal conheaderent-->
<!-- Modal body-->
<div class="modal-body">
<!--Product Panel-->
<div class="container-fluid">
<div class="product-panel">
<div class="row">
<!--First column: carousel gallery-->
<div class="col-xs-12 col-sm-6 col-lg-4">
<!-- Carousel -->
<div id="car-gall" class="carousel slide carousel-fade carousel-thumbnails carousel-gallery">
<!--Main image-->
<div class="col-xs-8">
<!-- Wrapper for slides -->
<div class="carousel-inner z-depth-1 hoverable" role="listbox">
<!-- First slide -->
<div class="item active">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-1.jpg" alt="slide1">
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-2.jpg" alt="slide2">
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-3.jpg" alt="slide3">
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
</div>
<!--/.Main image-->
<!-- Indicators -->
<div class="col-xs-4">
<ul class="carousel-indicators">
<li data-target="#car-gall" data-slide-to="0" class="active"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-1.jpg" class="img-responsive z-depth-1 hoverable">
</li>
<li data-target="#car-gall" data-slide-to="1"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-2.jpg" class="img-responsive z-depth-1 hoverable"></li>
<li data-target="#car-gall" data-slide-to="2"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-3.jpg" class="img-responsive z-depth-1 hoverable"></li>
</ul>
</div>
<!-- Indicators -->
</div>
<!-- /.carousel -->
</div>
<!--/.First column: carousel gallery-->
<!--Second column: product details-->
<div class="col-xs-12 col-sm-6 col-lg-3">
<!--Title-->
<h4>Product title <span class="label rgba-red-strong">-20%</span></h4>
<!--Price-->
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
<!--Select-->
<div class="row">
<div class="col-md-8">
<select>
<option value="" disabled selected>Choose your size</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<!--Quantity-->
<input type="number" value="1" class="quantity">
<a class="btn btn-default waves-effect waves-light">Buy now</a>
<!--Wish list button-->
<a class="btn-floating btn-small waves-effect waves-light red top-btn" data-toggle="tooltip" data-placement="right" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a>
<br>
<hr>
<!--Social media-->
<a class="btn-floating btn-small fb-bg waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-floating btn-small tw-bg waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-floating btn-small ins-bg waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-floating btn-small email-bg waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
<hr>
</div>
<!--Second column: product details-->
<!--Third column: product description-->
<div class="col-xs-12 col-sm-12 col-lg-4">
<h5>Short description</h5>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non porro dolore est beatae iste deleniti eveniet numquam recusandae, deserunt temporibus enim libero magni reiciendis veniam corporis ut atque aperiam rem?</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non porro dolore est beatae iste deleniti eveniet numquam recusandae, deserunt temporibus enim libero magni reiciendis veniam corporis ut atque aperiam rem?</p> <br>
<div class="text-center">
<a class="btn btn-default btn-lg waves-effect waves-light" data-toggle="modal" data-target="#product-details">Ask about details</a>
</div>
</div>
<!--/.Third column: product description-->
</div>
</div>
</div>
<!--/.Product Panel-->
</div>
<!-- /.Modal body-->
<!--Modal footer: close button-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">X</button>
</div>
<!--/.Modal footer: close button-->
</div>
<!-- Modal content-->
</div>
</div>
<!--/.Modal: QUick look -->
Virtual Product Card
15 $
Lorem ipsium chevron_right
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.
<div class="row">
<div class="col-md-6">
<!--Card-->
<div class="card card-min hoverable">
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-purple-strong">15 $</span></h5>
<a href=""><img src="https://mdbootstrap.com/wp-content/uploads/2015/09/material-design-for-bootstrap-6-min.jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Social share buttons-->
<a class="btn-floating btn-small waves-effect waves-light blue darken-4 activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a>
<!--/.Social share buttons-->
<!--Card content: Name and price-->
<div class="card-content">
<a href=""><h5 class="product-title">Lorem ipsium <i class="material-icons">chevron_right</i></h5></a>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-md waves-effect waves-light">Details</a>
<a href="#" class="btn btn-default btn-md waves-effect waves-light">Live preview</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
</div>
Collections
<div class="row">
<div class="col-md-3">
<!--Card-->
<div class="collection-card hoverable view overlay hm-zoom z-depth-1">
<!--Card image-->
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/collection.jpg" class="img-responsive">
<div class="mask"></div>
<!--Card footer-->
<div class="card-footer rgba-white-strong">
<!-- Title -->
<a href="" class="black-text"><h5 class="h5-responsive">Lorem ipsum <i class="material-icons">chevron_right</i></h5></a>
<!--Card details-->
</div>
</div>
<!--/.Card-->
</div>
<div class="col-md-3">
<!--Card-->
<div class="collection-card hoverable view overlay hm-zoom z-depth-1">
<!--Card image-->
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/collection.jpg" class="img-responsive">
<div class="mask"></div>
<!--Card footer-->
<div class="card-footer rgba-black-strong">
<!-- Title -->
<a href="" class="white-text"><h5 class="h5-responsive">Lorem ipsum <i class="material-icons">chevron_right</i></h5></a>
<!--Card details-->
</div>
</div>
<!--/.Card-->
</div>
</div>
Cart Modal
Click Cart Button to open a Cart Modal
Cart
<!--Trigger button-->
<a class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#cart-modal"><i class="fa fa-shopping-cart"> </i> <span>Cart</span> </a><span class="badge social-counter">4</span>
<!-- Modal -->
<div class="modal fade" id="cart-modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content modal-cart">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Cart</h4>
</div>
<div class="modal-body">
<ul class="collection">
<li class="collection-item">
<div>
<p><span class="quantity"> 1x</span> Product 1 <span class="label green">$9.99</span><a href="#!" class="secondary-content"><i class="material-icons">close</i></a></p>
</div>
</li>
<li class="collection-item">
<div>
<p><span class="quantity">2x</span> Product 2 <span class="label green">$19.99</span><a href="#!" class="secondary-content"><i class="material-icons">close</i></a></p>
</div>
</li>
<li class="collection-item">
<div>
<p> <span class="quantity">5x</span> Product 3 <span class="label green">$29.99</span><a href="#!" class="secondary-content"><i class="material-icons">close</i></a></p>
</div>
</li>
<li class="collection-item">
<div>
<p> <span class="quantity">3x</span> Product 4 <span class="label green">$59.99</span><a href="#!" class="secondary-content"><i class="material-icons">close</i></a></p>
</div>
</li>
<li class="collection-item">
<h5>Total <span class="label blue total">$119.96</span></h5>
</li>
</ul>
<button type="button" class="btn btn-primary waves-effect waves-light">Checkout</button>
<div class="cartPageLink">
<a href="">
<p>Go to cart page</p>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
Products Carousel
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
<!-- Carousel -->
<div id="carousel-multi-item" class="carousel slide multiitem-car">
<div class="text-center">
<a class="btn-floating blue darken-4 btn-small waves-effect waves-light" href="#carousel-multi-item" role="button" data-slide="prev"><i class="material-icons">keyboard_arrow_left</i></a>
<a class="btn-floating blue darken-4 btn-small waves-effect waves-light" href="#carousel-multi-item" role="button" data-slide="next"><i class="material-icons">keyboard_arrow_right</i></a>
</div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-multi-item" data-slide-to="0" class="active">
</li>
<li data-target="#carousel-multi-item" data-slide-to="1"></li>
<li data-target="#carousel-multi-item" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!-- First slide -->
<div class="item active">
<!-- Row -->
<div class="row">
<!-- Multi-item column -->
<div class="col-sm-4 item-card">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(11).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
<!-- Multi-item column -->
<div class="col-sm-4 item-card hidden-xs">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(12).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
<!-- Multi-item column -->
<div class="col-sm-4 item-card hidden-xs">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(13).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
</div>
<!-- /.row -->
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<!-- Row -->
<div class="row">
<!-- Multi-item column -->
<div class="col-sm-4 item-card">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(1).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
<!-- Multi-item column -->
<div class="col-sm-4 item-card hidden-xs">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(2).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
<!-- Multi-item column -->
<div class="col-sm-4 item-card hidden-xs">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(3).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
</div>
<!-- /.row -->
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<!-- Row -->
<div class="row">
<!-- Multi-item column -->
<div class="col-sm-4 item-card">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(4).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
<!-- Multi-item column -->
<div class="col-sm-4 item-card hidden-xs">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(5).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
<!-- Multi-item column -->
<div class="col-sm-4 item-card hidden-xs">
<!--Card-->
<div class="card card-product hoverable">
<!--Wish list and social share buttons-->
<ul class="text-right extra-buttons">
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn" data-toggle="tooltip" data-placement="left" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a></li>
<li><a class="btn-floating blue darken-4 btn-small waves-effect waves-light top-btn activator" data-toggle="tooltip" data-placement="left" data-original-title="Share"><i class="material-icons">share</i></a></li>
</ul>
<!--/.Wish list and social share buttons-->
<!--Image-->
<div class="card-image waves-effect waves-block waves-light view overlay hm-white-slight">
<!--Discount label-->
<h5 class="card-label"> <span class="label rgba-red-strong">-20%</span></h5>
<a href=""><img src="https://mdbootstrap.com/images/ecommerce/reg/reg%20(6).jpg">
<div class="mask"> </div>
</a>
</div>
<!--/.Image-->
<!--Rating-->
<a class="btn btn-sm waves-effect waves-light rating blue darken-4">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
</a>
<!--/.Rating-->
<!--Card content: Name and price-->
<div class="card-content text-center">
<div class="row">
<a href=""><h5 class="product-title">Product name</h5></a>
</div>
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
</div>
<!--/.Card content: Name and price-->
<!--Buttons-->
<div class="card-btn text-center">
<a href="#" class="btn btn-primary btn-sm waves-effect waves-light">Buy now</a>
<a href="#" class="btn btn-default btn-sm waves-effect waves-light" data-toggle="modal" data-target="#quick-look">Quick look</a>
</div>
<!--/.Buttons-->
<!--Social buttons-->
<div class="card-reveal text-center">
<span class="card-title grey-text text-darken-4">Share with your friends:<i class="material-icons right">close</i></span>
<hr>
<a class="btn-sm fb-bg rectangle waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-sm tw-bg rectangle waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-sm gplus-bg rectangle waves-effect waves-light"><i class="fa fa-google-plus"> </i></a>
<a class="btn-sm li-bg rectangle waves-effect waves-light"><i class="fa fa-linkedin"> </i></a>
<a class="btn-sm ins-bg rectangle waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-sm pin-bg rectangle waves-effect waves-light"><i class="fa fa-pinterest"> </i></a>
<a class="btn-sm yt-bg rectangle waves-effect waves-light"><i class="fa fa-youtube"> </i></a>
<a class="btn-sm git-bg rectangle waves-effect waves-light"><i class="fa fa-github"> </i></a>
<a class="btn-sm email-bg rectangle waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
</div>
<!--/.Social buttons-->
</div>
<!--/.Card-->
</div>
<!-- /.Multi-item column -->
</div>
<!-- /.row -->
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
</div>
<!-- /.carousel -->
Product Panel
Short description
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non porro dolore est beatae iste deleniti eveniet numquam recusandae, deserunt temporibus enim libero magni reiciendis veniam corporis ut atque aperiam rem?
<!--Product Panel-->
<div class="container-fluid">
<div class="card-panel product-panel hoverable">
<div class="row">
<!--First column: carousel gallery-->
<div class="col-xs-12 col-sm-6 col-lg-4">
<!-- Carousel -->
<div id="car-gall" class="carousel slide carousel-fade carousel-thumbnails carousel-gallery">
<!--Main image-->
<div class="col-xs-8">
<!-- Wrapper for slides -->
<div class="carousel-inner z-depth-1 hoverable" role="listbox">
<!-- First slide -->
<div class="item active">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-1.jpg" alt="slide1">
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-2.jpg" alt="slide2">
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item">
<img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-3.jpg" alt="slide3">
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
</div>
<!--/.Main image-->
<!-- Indicators -->
<div class="col-xs-4">
<ul class="carousel-indicators">
<li data-target="#car-gall" data-slide-to="0" class="active"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-1.jpg" class="img-responsive z-depth-1 hoverable">
</li>
<li data-target="#car-gall" data-slide-to="1"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-2.jpg" class="img-responsive z-depth-1 hoverable"></li>
<li data-target="#car-gall" data-slide-to="2"><img src="https://mdbootstrap.com/wp-content/uploads/2015/11/product-3.jpg" class="img-responsive z-depth-1 hoverable"></li>
</ul>
</div>
<!-- Indicators -->
</div>
<!-- /.carousel -->
</div>
<!--/.First column: carousel gallery-->
<!--Second column: product details-->
<div class="col-xs-12 col-sm-6 col-lg-3">
<!--Title-->
<h4>Product title <span class="label rgba-red-strong">-20%</span></h4>
<!--Price-->
<div class="price">
<p class="green-text medium-500">$500 <span class="discount light-300 black-text">$700</span></p>
</div>
<!--Select-->
<div class="row">
<div class="col-md-8">
<select>
<option value="" disabled selected>Choose your size</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
<!--Quantity-->
<input type="number" value="1" class="quantity">
<a class="btn btn-default waves-effect waves-light">Buy now</a>
<!--Wish list button-->
<a class="btn-floating btn-small waves-effect waves-light red top-btn" data-toggle="tooltip" data-placement="right" data-original-title="Add to wishlist"><i class="material-icons">favorite</i></a>
<br>
<hr>
<!--Social media-->
<a class="btn-floating btn-small fb-bg waves-effect waves-light"><i class="fa fa-facebook"> </i></a>
<a class="btn-floating btn-small tw-bg waves-effect waves-light"><i class="fa fa-twitter"> </i></a>
<a class="btn-floating btn-small ins-bg waves-effect waves-light"><i class="fa fa-instagram"> </i></a>
<a class="btn-floating btn-small email-bg waves-effect waves-light"><i class="fa fa-envelope-o"> </i></a>
<hr>
</div>
<!--Second column: product details-->
<!--Third column: product description-->
<div class="col-xs-12 col-sm-12 col-lg-4">
<h5>Short description</h5>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non porro dolore est beatae iste deleniti eveniet numquam recusandae, deserunt temporibus enim libero magni reiciendis veniam corporis ut atque aperiam rem?</p>
<div class="text-center">
<a class="btn btn-default btn-lg waves-effect waves-light" data-toggle="modal" data-target="#product-details">Ask about details</a>
</div>
</div>
<!--/.Third column: product description-->
</div>
</div>
</div>
<!--/.Product Panel-->
Pricing Cards
<div class="row">
<div class="col-md-4">
<!--Pricing card-->
<div class="pricing-card text-center z-depth-1 hoverable">
<!--Label-->
<div class="blue darken-2 z-depth-1">
<p class="no-margin white-text extra-padding-05">Basic</p>
</div>
<!--Price-->
<div class="card-up blue">
<h1 class="price">10</h1>
</div>
<!--Content-->
<div class="card-content">
<ul class="features-list">
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-times red-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-times red-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-times red-text"></i> Feature name</p>
</li>
</ul>
<hr>
<!--CTA-->
<a class="btn btn-danger btn-etc waves-effect waves-light">Buy now</a>
</div>
</div>
<!--/.Pricing card-->
</div>
<div class="col-md-4">
<!--Pricing card-->
<div class="pricing-card text-center z-depth-1 hoverable">
<!--Label-->
<div class="indigo darken-2 z-depth-1">
<p class="no-margin white-text extra-padding-05">Pro</p>
</div>
<!--Price-->
<div class="card-up indigo">
<h1 class="price">15</h1>
</div>
<!--Content-->
<div class="card-content">
<ul class="features-list">
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-times red-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-times red-text"></i> Feature name</p>
</li>
</ul>
<hr>
<!--CTA-->
<a class="btn btn-danger btn-etc waves-effect waves-light">Buy now</a>
</div>
</div>
<!--/.Pricing card-->
</div>
<div class="col-md-4">
<!--Pricing card-->
<div class="pricing-card text-center z-depth-1 hoverable">
<!--Label-->
<div class="deep-purple darken-2 z-depth-1">
<p class="no-margin white-text extra-padding-05">enterprise</p>
</div>
<!--Price-->
<div class="card-up deep-purple">
<h1 class="price">20</h1>
</div>
<!--Content-->
<div class="card-content">
<ul class="features-list">
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
<li>
<p><i class="fa fa-check green-text"></i> Feature name</p>
</li>
</ul>
<hr>
<!--CTA-->
<a class="btn btn-danger btn-etc waves-effect waves-light">Buy now</a>
</div>
</div>
<!--/.Pricing card-->
</div>
</div>
Sorting Panels
Categories (radio)
<!--Sorting: radio buttons-->
<div class="row">
<div class="col-md-3">
<div class="card-panel sort-panel text-center hoverable">
<h5 class="col-title">Categories (radio)</h5>
<hr>
<form class="categories">
<p>
<input name="group1" type="radio" id="cat-1" />
<label for="cat-1">Category 1 <span>(15)</span> </label>
</p>
<p>
<input name="group1" type="radio" id="cat-2" />
<label for="cat-2">Category 2 <span>(5)</span></label>
</p>
<p>
<input name="group1" type="radio" id="cat-3" />
<label for="cat-3">Category 3 <span>(7)</span></label>
</p>
<p>
<input name="group1" type="radio" id="cat-4" />
<label for="cat-4">Category 4 <span>(11)</span></label>
</p>
</form>
</div>
</div>
</div>
<!--/.Sorting: radio buttons-->
Categories (checkbox)
<!--Sorting: checkbox-->
<div class="col-md-3">
<div class="card-panel sort-panel text-center hoverable">
<h5 class="col-title">Categories (checkbox)</h5>
<hr>
<form class="categories">
<p>
<input name="group1" type="checkbox" id="cat-11" />
<label for="cat-11">Category 1 <span>(15)</span> </label>
</p>
<p>
<input name="group1" type="checkbox" id="cat-12" />
<label for="cat-12">Category 2 <span>(5)</span></label>
</p>
<p>
<input name="group1" type="checkbox" id="cat-13" />
<label for="cat-13">Category 3 <span>(7)</span></label>
</p>
<p>
<input name="group1" type="checkbox" id="cat-14" />
<label for="cat-14">Category 4 <span>(11)</span></label>
</p>
</form>
</div>
</div>
<!--/.Sorting: checkbox-->
<!--Sorting: colors-->
<div class="col-md-2">
<div class="card-panel sort-panel text-center hoverable">
<h5 class="col-title">Colors</h5>
<hr>
<div class="color-sorting">
<a class="btn red waves-effect"></a>
<a class="btn pink waves-effect"></a>
<a class="btn purple waves-effect"></a>
<a class="btn deep-purple waves-effect"></a>
<a class="btn indigo waves-effect"></a>
<a class="btn blue waves-effect"></a>
<a class="btn light-blue waves-effect"></a>
<a class="btn cyan waves-effect"></a>
<a class="btn teal waves-effect"></a>
<a class="btn green waves-effect"></a>
<a class="btn lime waves-effect"></a>
<a class="btn yellow waves-effect"></a>
<a class="btn grey waves-effect"></a>
<a class="btn blue-grey waves-effect"></a>
</div>
</div>
</div>
<!--/.Sorting: colors-->
<!--Sorting: numbers-->
<div class="col-md-3 no-padding">
<div class="card-panel sort-panel text-center hoverable">
<h5 class="col-title">Size</h5>
<hr>
<ul class="number-sorting list-inline">
<li><a class="btn waves-effect">30</a></li>
<li><a class="btn waves-effect">35</a></li>
<li><a class="btn waves-effect">40</a></li>
<li><a class="btn waves-effect">45</a></li>
</ul>
</div>
</div>
<!--Sorting: numbers-->
<!--Sorting: dropdowns-->
<div class="col-md-3">
<div class="card-panel sort-panel text-center hoverable">
<h5 class="col-title">Dropdowns</h5>
<hr>
<!-- Dropdown Trigger -->
<button type="button" class="btn btn-default dropdown-button" href="#" data-activates="dropdown1">Colors</button>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content color-sorting rectangle'>
<li>
<a class="btn red waves-effect"></a>
</li>
<li>
<a class="btn pink waves-effect"></a>
</li>
<li>
<a class="btn purple waves-effect"></a>
</li>
<li>
<a class="btn deep-purple waves-effect"></a>
</li>
<li>
<a class="btn indigo waves-effect"></a>
</li>
<li>
<a class="btn blue waves-effect"></a>
</li>
<li>
<a class="btn light-blue waves-effect"></a>
</li>
<li>
<a class="btn cyan waves-effect"></a>
</li>
<li>
<a class="btn teal waves-effect"></a>
</li>
<li>
<a class="btn green waves-effect"></a>
</li>
<li>
<a class="btn lime waves-effect"></a>
</li>
<li>
<a class="btn yellow waves-effect"></a>
</li>
<li>
<a class="btn grey waves-effect"></a>
</li>
<li>
<a class="btn blue-grey waves-effect"></a>
</li>
</ul>
<!-- Dropdown Trigger -->
<button type="button" class="btn btn-default dropdown-button" href="#" data-activates="dropdown2">Size</button>
<!-- Dropdown Structure -->
<ul id='dropdown2' class='dropdown-content number-sorting'>
<li><a class="btn waves-effect">30</a></li>
<li><a class="btn waves-effect">35</a></li>
<li><a class="btn waves-effect">40</a></li>
<li><a class="btn waves-effect">45</a></li>
</ul>
</div>
</div>
<!--/.Sorting: dropdowns-->
Additional options
<!--Sorting: selects-->
<div class="col-md-4">
<div class="card-panel sort-panel text-center hoverable">
<h5 class="text-left col-title">Additional options</h5>
<hr>
<!--Products number-->
<div class="row">
<div class="col-md-12">
<select>
<option value="" disabled selected>Products per page:</option>
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
<option value="3">40</option>
</select>
</div>
</div>
<!--Products number-->
<!--Sort by-->
<div class="row">
<div class="col-md-12">
<select>
<option value="" disabled selected>Sort by:</option>
<option value="1">Price, low to high</option>
<option value="2">Price, high to low</option>
<option value="3">Name, A-Z</option>
<option value="3">Name, Z-A</option>
<option value="3">Date, new to old</option>
<option value="3">Date, old to new</option>
<option value="3">Best selling</option>
</select>
</div>
</div>
<!--/.Sort by-->
</div>
</div>
<!--/.Sorting: selects-->
Set the maximum price
Set the minimum price
<!--Sorting: Range-->
<div class="col-md-4">
<div class="card-panel sort-panel text-center hoverable">
<h5 class=" col-title">Set the maximum price</h5>
<form action="#">
<div class="range-field">
<input type="range" id="test5" min="0" max="100" />
</div>
</form>
</div>
<div class="card-panel sort-panel text-center hoverable">
<h5 class=" col-title">Set the minimum price</h5>
<form action="#">
<div class="range-field">
<input type="range" id="test5" min="0" max="100" />
</div>
</form>
</div>
</div>
<!--/.Sorting: Range-->