Angular Bootstrap E-Commerce sections
Angular eCommerce sections - Bootstrap 4 & Material Design
E-commerce sections allow you to present your products and pricing in neat, clear and outstanding way.
Products v.1 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!--Section: Products v.1-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 font-weight-bold h1 py-5">Our bestsellers</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-3">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/1.jpg" alt="sample photo"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Denim</h5>
</a>
<mdb-card-title>
<h4>
<strong>
<a href="">Denim trousers</a>
</strong>
</h4>
</mdb-card-title>
<!--Rating-->
<ul class="rating">
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="far fa-star"></i>
</li>
</ul>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit..
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left font-weight-bold">
<strong>49$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fas fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fas fa-share-alt grey-text ml-3"></i>
</a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
<i class="fas fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-3">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg" alt="sample photo"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Shoes</h5>
</a>
<mdb-card-title>
<h4 class="card-title">
<strong>
<a href="">High heels</a>
</strong>
</h4>
</mdb-card-title>
<!--Rating-->
<ul class="rating">
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
</ul>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left font-weight-bold">
<strong>89$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fas fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fas fa-share-alt grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fas fa-heart grey-text ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-3">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg" alt="sample photo"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Outwear</h5>
</a>
<mdb-card-title>
<h4 class="card-title">
<strong>
<a href="">Brown coat</a>
</strong>
</h4>
</mdb-card-title>
<!--Rating-->
<ul class="rating">
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="far fa-star-half"></i>
</li>
</ul>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left font-weight-bold">
<strong>59$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fas fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fas fa-share-alt grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fas fa-heart grey-text ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-3">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg" alt="sample photo"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Blouses</h5>
</a>
<mdb-card-title>
<h4 class="card-title">
<strong>
<a href="">Shirt</a>
</strong>
</h4>
</mdb-card-title>
<!--Rating-->
<ul class="rating">
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
<i class="far fa-star"></i>
</li>
</ul>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left font-weight-bold">
<strong>119$</strong>
</span>
<span class="float-right">
<a data-toggle="tooltip" data-placement="top" title="Add to Cart">
<i class="fas fa-shopping-cart grey-text ml-3"></i>
</a>
<a data-toggle="tooltip" data-placement="top" title="Share">
<i class="fas fa-share-alt grey-text ml-3"></i>
</a>
<a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
<i class="fas fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Fourth column column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.1-->
Products v.2 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.jpg)
.jpg)
.jpg)
<!--Section: Products v.2-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 font-weight-bold text-center h1 py-5">Our bestsellers</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-3">
<!--Card-->
<mdb-card cascade="true" wider="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (55).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Camera</h5>
</a>
<mdb-card-title>
<h4 class="card-title">
<strong>
<a href="">GoPro</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left font-weight-bold">
<strong>1439$</strong>
</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="far fa-eye grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fas fa-heart grey-text ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-3">
<!--Card-->
<mdb-card cascade="true" wider="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(49).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Photography</h5>
</a>
<mdb-card-title>
<h4 class="card-title">
<strong>
<a href="">Camera</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left font-weight-bold">
<strong>1160$</strong>
</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="far fa-eye grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fas fa-heart grey-text ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-3">
<!--Card-->
<mdb-card cascade="true" wider="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg"
class="img-fluid" alt="sample photo"></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Smartphone</h5>
</a>
<mdb-card-title>
<h4>
<strong>
<a href="">iPhone 6S</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left font-weight-bold">
<strong>2160$</strong>
</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="far fa-eye grey-text ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fas fa-heart grey-text ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.2-->
Products v.3 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!--Section: Products v.3-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 py-5">Our bestsellers</h2>
<!--Section description-->
<p class="grey-text mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Card-->
<mdb-card class="align-items-center">
<!--Card image-->
<div class="view overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg" alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Shirt</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Denim shirt
<span class="badge badge-pill danger-color">NEW</span>
</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>120$</strong>
</h4>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Card-->
<mdb-card class="align-items-center">
<!--Card image-->
<div class="view overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg" alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Sport wear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Sweatshirt</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>139$</strong>
</h4>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Card-->
<mdb-card class="align-items-center">
<!--Card image-->
<div class="view overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg" class="img-fluid"
alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Sport wear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Grey blouse
<span class="badge badge-pill primary-color">bestseller</span>
</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>99$</strong>
</h4>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Grid column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Card-->
<mdb-card class="align-items-center">
<!--Card image-->
<div class="view overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg" alt=""></mdb-card-img>
<a>
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body class="text-center">
<!--Category & Title-->
<a href="" class="grey-text">
<h5>Outwear</h5>
</a>
<h5>
<strong>
<a href="" class="dark-grey-text">Black jacket</a>
</strong>
</h5>
<h4 class="font-weight-bold blue-text">
<strong>219$</strong>
</h4>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<!--Fourth column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.3-->
Products v.4 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!--Section: Products v.4-->
<section class="pb-3 text-center ">
<!--Section heading-->
<h2 class="h1 py-5">Our bestsellers</h2>
<!--Section description-->
<p class="grey-text mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Collection card-->
<mdb-card class="collection-card z-depth-1-half">
<!--Card image-->
<div class="view zoom waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg" alt=""></mdb-card-img>
<div class="stripe dark">
<a>
<p>Red trousers
<i class="fas fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</mdb-card>
<!--Collection card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Collection card-->
<mdb-card class="collection-card z-depth-1-half">
<!--Card image-->
<div class="view zoom waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg" alt=""></mdb-card-img>
<div class="stripe light">
<a>
<p>Sweatshirt
<i class="fas fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</mdb-card>
<!--Collection card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Collection card-->
<mdb-card class="collection-card z-depth-1-half">
<!--Card image-->
<div class="view zoom waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/9.jpg" alt=""></mdb-card-img>
<div class="stripe dark">
<a>
<p>Accessories
<i class="fas fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</mdb-card>
<!--Collection card-->
</div>
<!--Grid column-->
<!--Fourth column-->
<div class="col-lg-3 col-md-6 mb-4">
<!--Collection card-->
<mdb-card class="collection-card z-depth-1-half">
<!--Card image-->
<div class="view zoom waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg" alt=""></mdb-card-img>
<div class="stripe light">
<a>
<p>Sweatshirt
<i class="fas fa-angle-right"></i>
</p>
</a>
</div>
</div>
<!--Card image-->
</mdb-card>
<!--Collection card-->
</div>
<!--Fourth column-->
</div>
<!--Grid row-->
</section>
<!--Section: Products v.4-->
Products v.5 MDB Pro component
Our bestsellers
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.jpg)
Shoes
Leather boots
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Jeans
Slim jeans
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Shorts
Denim shorts
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Accessories
Summer hat
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Shoes
Black heels
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Outerwear
Black jacket
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
Accessories
Leather bag
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
Accessories
Leather belt
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.
.jpg)
<!--Section: Products v.5-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 py-5">Our bestsellers</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Carousel Wrapper-->
<mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation" [type]="'carousel-multi-item'"
[animation]="'slide'">
<!--First slide-->
<mdb-slide>
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(39).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Leather boots</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(22).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Jeans</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Slim jeans</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Others/img%20(31).jpg" alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shorts</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Denim shorts</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
</mdb-slide>
<!--/First slide-->
<!--Second slide-->
<mdb-slide>
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Summer hat</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(37).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Black heels</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(31).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Outerwear</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Black jacket</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
</mdb-slide>
<!--/Second slide-->
<!--Third slide-->
<mdb-slide>
<div class="col-md-4">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(38).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Leather bag</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg" alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Accessories</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Leather belt</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<!--Card-->
<mdb-card cascade="true" narrower="true" class="card-ecommerce">
<!--Card image-->
<div class="view view-cascade overlay waves-light" mdbWavesEffect>
<mdb-card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(57).jpg"
alt="sample photo"></mdb-card-img>
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card image-->
<!--Card content-->
<mdb-card-body cascade="true" class="text-center no-padding">
<!--Category & Title-->
<a href="" class="text-muted">
<h5>Shoes</h5>
</a>
<mdb-card-title>
<h4 class="card-title my-4">
<strong>
<a href="">Sneakers</a>
</strong>
</h4>
</mdb-card-title>
<!--Description-->
<mdb-card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci.
</mdb-card-text>
<!--Card footer-->
<mdb-card-footer>
<span class="float-left">69$</span>
<span class="float-right">
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Quick Look">
<i class="far fa-eye ml-3"></i>
</a>
<a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
<i class="far fa-heart ml-3"></i>
</a>
</span>
</mdb-card-footer>
</mdb-card-body>
<!--Card content-->
</mdb-card>
<!--Card-->
</div>
</mdb-slide>
<!--/Third slide-->
</mdb-carousel>
<!--/.Carousel Wrapper-->
</section>
<!--Section: Products v.5-->
Pricing v.1 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
10
Basic
-
20 GB Of Storage
-
2 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
20
Pro
-
20 GB Of Storage
-
4 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
30
Enterprise
-
30 GB Of Storage
-
5 Email Accounts
-
24h Tech Support
-
300 GB Bandwidth
-
User Management
<!--Section: Pricing v.1-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Pricing card-->
<mdb-card class="pricing-card">
<!--Price-->
<div class="price header blue text-white">
<h2 class="number">10</h2>
<div class="version">
<h5>Basic</h5>
</div>
</div>
<!--Price-->
<!--Features-->
<mdb-card-body class="striped">
<ul>
<li>
<p class="mt-1">
<i class="fas fa-check green-text pr-2"></i> 20 GB Of Storage</p>
</li>
<li>
<p>
<i class="fas fa-check green-text pr-2"></i> 2 Email Accounts</p>
</li>
<li>
<p>
<i class="fas fa-times red-text pr-2"></i> 24h Tech Support</p>
</li>
<li>
<p>
<i class="fas fa-times red-text pr-2"></i> 300 GB Bandwidth</p>
</li>
<li>
<p>
<i class="fas fa-times red-text pr-2"></i> User Management </p>
</li>
</ul>
<button mdbBtn color="blue" class="waves-light" mdbWavesEffect>Buy now</button>
</mdb-card-body>
<!--Features-->
</mdb-card>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Pricing card-->
<mdb-card class="pricing-card">
<!--Price-->
<div class="price header indigo text-white">
<h2 class="number">20</h2>
<div class="version">
<h5>Pro</h5>
</div>
</div>
<!--Price-->
<!--Features-->
<mdb-card-body class="striped">
<ul>
<li>
<p class="mt-1">
<i class="fas fa-check green-text pr-2"></i> 20 GB Of Storage</p>
</li>
<li>
<p>
<i class="fas fa-check green-text pr-2"></i> 4 Email Accounts</p>
</li>
<li>
<p>
<i class="fas fa-check green-text pr-2"></i> 24h Tech Support</p>
</li>
<li>
<p>
<i class="fas fa-times red-text pr-2"></i> 300 GB Bandwidth</p>
</li>
<li>
<p>
<i class="fas fa-times red-text pr-2"></i> User Management </p>
</li>
</ul>
<button mdbBtn color="indigo" class="waves-light" mdbWavesEffect>Buy now</button>
</mdb-card-body>
<!--Features-->
</mdb-card>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Pricing card-->
<mdb-card class="pricing-card">
<!--Price-->
<div class="price header deep-purple text-white">
<h2 class="number">30</h2>
<div class="version">
<h5>Enterprise</h5>
</div>
</div>
<!--Price-->
<!--Features-->
<mdb-card-body class="striped">
<ul>
<li>
<p class="mt-1">
<i class="fas fa-check green-text pr-2"></i> 30 GB Of Storage</p>
</li>
<li>
<p>
<i class="fas fa-check green-text pr-2"></i> 5 Email Accounts</p>
</li>
<li>
<p>
<i class="fas fa-check green-text pr-2"></i> 24h Tech Support</p>
</li>
<li>
<p>
<i class="fas fa-check green-text pr-2"></i> 300 GB Bandwidth</p>
</li>
<li>
<p>
<i class="fas fa-check green-text pr-2"></i> User Management </p>
</li>
</ul>
<button mdbBtn color="deep-purple" class="waves-light" mdbWavesEffect>Buy now</button>
</mdb-card-body>
<!--Features-->
</mdb-card>
<!--Pricing card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.1-->
Pricing v.2 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!--Section: Pricing v.2-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Basic</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">10</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>1</strong> project</p>
</li>
<li>
<p>
<strong>100</strong> components</p>
</li>
<li>
<p>
<strong>150</strong> features</p>
</li>
<li>
<p>
<strong>200</strong> members</p>
</li>
<li>
<p>
<strong>250</strong> messages</p>
</li>
</ul>
<a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-teal-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Pro</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">20</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>3</strong> project</p>
</li>
<li>
<p>
<strong>200</strong> components</p>
</li>
<li>
<p>
<strong>250</strong> features</p>
</li>
<li>
<p>
<strong>300</strong> members</p>
</li>
<li>
<p>
<strong>350</strong> messages</p>
</li>
</ul>
<a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg');">
<!--Pricing card-->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>Enterprise</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">30</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>5</strong> project</p>
</li>
<li>
<p>
<strong>300</strong> components</p>
</li>
<li>
<p>
<strong>350</strong> features</p>
</li>
<li>
<p>
<strong>400</strong> members</p>
</li>
<li>
<p>
<strong>450</strong> messages</p>
</li>
</ul>
<a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect> Buy now</a>
</div>
</div>
<!--Pricing card-->
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.2-->
Pricing v.3 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
Basic plan
59$
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.
Buy nowPremium plan
79$
Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.
Buy nowAdvanced plan
99$
At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.
Buy now
<!--Section: Pricing v.3-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Basic plan</h5>
<div class="flex-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-home light-blue-text"></i>
</div>
</div>
<!--Price-->
<h2 class="font-weight-bold my-3">59$</h2>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id
nobis
accusamus deleniti
cumque hic laborum.</p>
<a mdbBtn color="light-blue" rounded="true" class="waves-light" mdbWavesEffect>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card purple-gradient">
<!--Content-->
<div class="text-center white-text">
<div class="card-body">
<h5>Premium plan</h5>
<div class="flex-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-users white-text"></i>
</div>
</div>
<!--Price-->
<h2 class="font-weight-bold my-3">79$</h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio
cupiditate
sequi atque laborumimo.
</p>
<a mdbBtn color="white" outline="true" rounded="true" class="waves-light" mdbWavesEffect>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Advanced plan</h5>
<div class="flex-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-chart-bar light-blue-text"></i>
</div>
</div>
<!--Price-->
<h2 class="font-weight-bold my-3">99$</h2>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id
nobis
accusamus deleniti
cumque hic laborum.</p>
<a mdbBtn color="light-blue" rounded="true" class="waves-light" mdbWavesEffect>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.3-->
Pricing v.4 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
Basic plan
59$
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.
Buy nowPremium plan
79$
Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.
Buy nowAdvanced plan
99$
At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.
Buy now
<!--Section: Pricing v.4-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="font-weight-bold h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card z-depth-1">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Basic plan</h5>
<div class="flex-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-home indigo-text"></i>
</div>
</div>
<!--Price-->
<h2 class="my-3">
<strong>59$</strong>
</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni
accusantium
repellat eveniet
quia vitae.
</p>
<a mdbBtn color="indigo" rounded="true" class="waves-light" mdbWavesEffect>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card indigo">
<!--Content-->
<div class="text-center white-text">
<div class="card-body">
<h5>Premium plan</h5>
<div class="flex-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-users white-text"></i>
</div>
</div>
<!--Price-->
<h2 class="my-3">
<strong>79$</strong>
</h2>
<p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio
cupiditate
sequi atque.
</p>
<a mdbBtn color="white" outline="true" rounded="true" class="waves-light" mdbWavesEffect>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card z-depth-1">
<!--Content-->
<div class="text-center">
<div class="card-body">
<h5>Advanced plan</h5>
<div class="flex-center">
<div class="card-circle d-flex justify-content-center align-items-center">
<i class="fas fa-chart-line indigo-text"></i>
</div>
</div>
<!--Price-->
<h2 class="my-3">
<strong>99$</strong>
</h2>
<p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni
accusantium
repellat eveniet
quia vitae.
</p>
<a mdbBtn color="indigo" rounded="true" class="waves-light" mdbWavesEffect>Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.4-->
Pricing v.5 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
<!--Section: Pricing v.5-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="pricing-card card">
<!--Content-->
<div class="card-body">
<h5 class="mt-3">
<strong>Basic</strong>
</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="red-text number">10</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>1</strong> project</p>
</li>
<li>
<p>
<strong>100</strong> components</p>
</li>
<li>
<p>
<strong>150</strong> features</p>
</li>
<li>
<p>
<strong>200</strong> members</p>
</li>
</ul>
<a mdbBtn color="danger" rounded="true" class="mb-4 waves-light" mdbWavesEffect> Buy now</a>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!-- Card -->
<div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(8).jpg');">
<!-- Content -->
<div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">
<!--Content-->
<div class="card-body">
<h5>
<strong>Pro</strong>
</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="number">20</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>3</strong> projects</p>
</li>
<li>
<p>
<strong>200</strong> components</p>
</li>
<li>
<p>
<strong>250</strong> features</p>
</li>
<li>
<p>
<strong>300</strong> members</p>
</li>
</ul>
<a mdbBtn color="white" outline="true" rounded="true" class="waves-light" mdbWavesEffect> Buy now</a>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="pricing-card card">
<!--Content-->
<div class="card-body">
<h5 class="mt-3">
<strong>Enterprise</strong>
</h5>
<!--Price-->
<div class="price pt-0">
<h2 class="red-text number">30</h2>
</div>
<!--Price-->
<ul class="striped">
<li>
<p>
<strong>5</strong> projects</p>
</li>
<li>
<p>
<strong>300</strong> components</p>
</li>
<li>
<p>
<strong>350</strong> features</p>
</li>
<li>
<p>
<strong>400</strong> members</p>
</li>
</ul>
<a mdbBtn color="danger" rounded="true" class="mb-4 waves-light" mdbWavesEffect>Buy now</a>
</div>
</div>
<!--Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.5-->
Pricing v.6 MDB Pro component
Our pricing plans
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
BASIC
20$
-
1 project
-
100 components
-
150 features
-
200 members
PRO
80$
-
1 project
-
100 components
-
150 features
-
200 members
ENTERPRISE
100$
-
1 project
-
100 components
-
150 features
-
200 members
<!--Section: Pricing v.6-->
<section class="text-center pb-3 my-5">
<!--Section heading-->
<h2 class="h1 py-5">Our pricing plans</h2>
<!--Section description-->
<p class="grey-text pb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam
iure
provident voluptate esse quasi,
veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Pricing card-->
<div class="card pricing-card white-text">
<!--Price-->
<div class="header aqua-gradient">
<h4 class="option">BASIC</h4>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped green-striped card-background heading px-5">
<h2 class="my-4 h1">20$</h2>
<ul>
<li>
<p class="mt-1">
<strong>1</strong> project</p>
</li>
<li>
<p>
<strong>100</strong> components</p>
</li>
<li>
<p>
<strong>150</strong> features</p>
</li>
<li>
<p>
<strong>200</strong> members</p>
</li>
</ul>
<button mdbBtn gradient="aqua" rounded="true" class="mb-3 mt-3 waves-light" mdbWavesEffect>Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Pricing card-->
<div class="card pricing-card white-text">
<!--Price-->
<div class="header peach-gradient">
<h4 class="option">PRO</h4>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped orange-striped card-background heading px-5">
<h2 class="my-4 h1">80$</h2>
<ul>
<li>
<p class="mt-1">
<strong>1</strong> project</p>
</li>
<li>
<p>
<strong>100</strong> components</p>
</li>
<li>
<p>
<strong>150</strong> features</p>
</li>
<li>
<p>
<strong>200</strong> members</p>
</li>
</ul>
<button mdbBtn gradient="peach" rounded="true" class="mb-3 mt-3 waves-light" mdbWavesEffect>Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Pricing card-->
<div class="card pricing-card white-text">
<!--Price-->
<div class="header purple-gradient">
<h4 class="option">ENTERPRISE</h4>
</div>
<!--Price-->
<!--Features-->
<div class="card-body striped purple-striped card-background heading px-5">
<h2 class="my-4 h1">100$</h2>
<ul>
<li>
<p class="mt-1">
<strong>1</strong> project</p>
</li>
<li>
<p>
<strong>100</strong> components</p>
</li>
<li>
<p>
<strong>150</strong> features</p>
</li>
<li>
<p>
<strong>200</strong> members</p>
</li>
</ul>
<button mdbBtn gradient="purple" rounded="true" class="mb-3 mt-3 waves-light" mdbWavesEffect>Buy now</button>
</div>
<!--Features-->
</div>
<!--Pricing card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
<!--Section: Pricing v.6-->
Angular E-Commerce - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular e-commerce sections.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
// MDB Angular Pro
import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'