Angular Bootstrap E-Commerce sections

Angular eCommerce sections - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

E-commerce sections allow you to present your products and pricing in neat, clear and outstanding way.

Required styles import

Starting with MDB Angular 8, using the following components requires importing an additional stylesheet. Add the following imports to the global styles.scss stylesheet file. 

@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/variables-pro";

@import "~ng-uikit-pro-standard/assets/scss/addons-pro/_ecommerce-pro.scss"; // Import only when you want to use the Products examples
@import "~ng-uikit-pro-standard/assets/scss/sections-pro/_pricing-pro.scss"; // Import only when you want to use the Pricing examples

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.

sample photo
Denim

Denim trousers

Neque porro quisquam est, qui dolorem ipsum quia dolor sit..

49$
sample photo
Shoes

High heels

Neque porro quisquam est, qui dolorem ipsum quia dolor sit.

89$
sample photo
Outwear

Brown coat

Neque porro quisquam est, qui dolorem ipsum quia dolor sit.

59$
sample photo
Blouses

Shirt

Neque porro quisquam est, qui dolorem ipsum quia dolor sit.

119$ 
<!--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.webp" 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>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </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">
                <mdb-icon fas icon="shopping-cart" class="grey-text ml-3"></mdb-icon>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Share">
                <mdb-icon fas icon="share-alt" class="grey-text ml-3"></mdb-icon>
              </a>
              <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
                <mdb-icon fas icon="heart" class="ml-3"></mdb-icon>
              </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.webp" 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>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </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">
                <mdb-icon fas icon="shopping-cart" class="grey-text ml-3"></mdb-icon>
              </a>
              <a data-toggle="tooltip" data-placement="top" title="Share">
                <mdb-icon fas icon="share-alt" class="grey-text ml-3"></mdb-icon>
              </a>
              <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
                <mdb-icon fas icon="heart" class="ml-3"></mdb-icon>
              </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.webp" 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>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star-half"></mdb-icon>
            </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">
              <mdb-icon fas icon="shopping-cart" class="grey-text ml-3"></mdb-icon>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Share">
              <mdb-icon fas icon="share-alt" class="grey-text ml-3"></mdb-icon>
            </a>
            <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
              <mdb-icon fas icon="heart" class="ml-3"></mdb-icon>
            </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.webp" 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>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </li>
            <li>
              <mdb-icon fas icon="star"></mdb-icon>
            </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">
              <mdb-icon fas icon="shopping-cart" class="grey-text ml-3"></mdb-icon>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Share">
              <mdb-icon fas icon="share-alt" class="grey-text ml-3"></mdb-icon>
            </a>
            <a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist">
              <mdb-icon fas icon="heart" class="ml-3"></mdb-icon>
            </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.

sample photo
Camera

GoPro

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

1439$
sample photo
Photography

Camera

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

1160$
sample photo
Smartphone

iPhone 6S

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

2160$ 
<!--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).webp"
            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">
                <mdb-icon far icon="eye" class="grey-text ml-3"></mdb-icon>
              </a>
              <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                <mdb-icon fas icon="heart" class="grey-text ml-3"></mdb-icon>
              </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).webp"
            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">
                <mdb-icon far icon="eye" class="grey-text ml-3"></mdb-icon>
              </a>
              <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                <mdb-icon fas icon="heart" class="grey-text ml-3"></mdb-icon>
              </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).webp"
            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">
                <mdb-icon far icon="eye" class="grey-text ml-3"></mdb-icon>
              </a>
              <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
                <mdb-icon fas icon="heart" class="grey-text ml-3"></mdb-icon>
              </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.
Shirt
Denim shirt NEW

120$

Sport wear
Sweatshirt

139$

Sport wear
Grey blouse BEST

99$

Outwear
Black jacket

219$ 

<!--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.webp" 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
                <mdb-badge pill="true" danger="true">NEW</mdb-badge>
              </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.webp" 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.webp" 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
                <mdb-badge pill="true" primary="true">Bestseller</mdb-badge>
              </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.webp" 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.

Red trousers

Sweatshirt

Accessories

Sweatshirt 

<!--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.webp" alt=""></mdb-card-img>
          <div class="stripe dark">
            <a>
              <p>Red trousers
                <mdb-icon fas icon="angle-right"></mdb-icon>
              </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.webp" alt=""></mdb-card-img>
          <div class="stripe light">
            <a>
              <p>Sweatshirt
                <mdb-icon fas icon="angle-right"></mdb-icon>
              </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.webp" alt=""></mdb-card-img>
          <div class="stripe dark">
            <a>
              <p>Accessories
                <mdb-icon fas icon="angle-right"></mdb-icon>
              </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.webp" alt=""></mdb-card-img>
          <div class="stripe light">
            <a>
              <p>Sweatshirt
                <mdb-icon fas icon="angle-right"></mdb-icon>
              </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.

<!--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).webp"
              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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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).webp"
              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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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).webp" 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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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).webp"
              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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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).webp"
              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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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).webp"
              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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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).webp"
              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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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.webp" 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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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).webp"
              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">
                  <mdb-icon far icon="eye" class="ml-3"></mdb-icon>
                </a>
                <a class="" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add to Wishlist">
                  <mdb-icon far icon="heart" class="ml-3"></mdb-icon>
                </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">
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 20 GB Of Storage</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon>  2 Email Accounts</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="times" class="red-text pr-2"></mdb-icon>  24h Tech Support</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="times" class="red-text pr-2"></mdb-icon> 300 GB Bandwidth</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="times" class="red-text pr-2"></mdb-icon> 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">
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 20 GB Of Storage</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 4 Email Accounts</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 24h Tech Support</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="times" class="red-text pr-2"></mdb-icon> 300 GB Bandwidth</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="times" class="red-text pr-2"></mdb-icon> 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">
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 30 GB Of Storage</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 5 Email Accounts</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 24h Tech Support</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 300 GB Bandwidth</p>
            </li>
            <li>
              <p>
                <mdb-icon fas icon="check" class="green-text pr-2"></mdb-icon> 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.

Basic

10

  • 1 project

  • 100 components

  • 150 features

  • 200 members

  • 250 messages

Buy now
Pro

20

  • 3 project

  • 200 components

  • 250 features

  • 300 members

  • 350 messages

Buy now
Enterprise

30

  • 5 project

  • 300 components

  • 350 features

  • 400 members

  • 450 messages

Buy now 
<!--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 -->
      <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).webp')">

        <!--Pricing card-->
        <div
          class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">

          <!--Content-->
          <mdb-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>
          </mdb-card-body>

        </div>
        <!--Pricing card-->
      </mdb-card>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">

      <!-- Card -->
      <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).webp')">

        <!--Pricing card-->
        <div
          class="text-white text-center pricing-card d-flex align-items-center rgba-teal-strong py-3 px-3 rounded">

          <!--Content-->
          <mdb-card-body 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>
          </mdb-card-body>

        </div>
        <!--Pricing card-->
      </mdb-card>
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">

      <!-- Card -->
      <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).webp')">

        <!--Pricing card-->
        <div
          class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">

          <!--Content-->
          <mdb-card-body 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>
          </mdb-card-body>

        </div>
        <!--Pricing card-->
      </mdb-card>
    </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 now
Premium plan

79$

Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.

Buy now
Advanced 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-->
      <mdb-card>

        <!--Content-->
        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mb-4">Basic plan</h5>
          </mdb-card-title>
          <div class="card-circle mx-auto d-flex flex-center">
            <mdb-icon fas icon="home" class="light-blue-text"></mdb-icon>
          </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>
        </mdb-card-body>

      </mdb-card>
      <!--Card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <!--Card-->
      <mdb-card bgColor="purple-gradient" class="text-white">

        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mb-4">Premium plan</h5>
          </mdb-card-title>
          <div class="card-circle mx-auto d-flex flex-center">
            <mdb-icon fas icon="users" class="fas fa-users"></mdb-icon>
          </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>
        </mdb-card-body>

      </mdb-card>
      <!--Card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <!--Card-->
      <mdb-card>

        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mb-4">Advanced plan</h5>
          </mdb-card-title>
          <div class="card-circle mx-auto d-flex flex-center">
            <mdb-icon fas icon="chart-bar" class="light-blue-text"></mdb-icon>
          </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>
        </mdb-card-body>

      </mdb-card>
      <!--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 now
Premium plan

79$

Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.

Buy now
Advanced 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-->
      <mdb-card>
        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mb-4">Basic plan</h5>
          </mdb-card-title>
          <div class="card-circle mx-auto d-flex flex-center">
            <mdb-icon fas icon="home" class="indigo-text"></mdb-icon>
          </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>
        </mdb-card-body>

      </mdb-card>
      <!--Card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <!--Card-->
      <mdb-card bgColor="indigo" class="white-text">

        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mb-4">Premium plan</h5>
          </mdb-card-title>
          <div class="card-circle d-flex flex-center mx-auto">
            <mdb-icon fas icon="users" class="white-text"></mdb-icon>
          </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>
        </mdb-card-body>

      </mdb-card>
      <!--Card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <!--Card-->
      <mdb-card>

        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mb-4">Advanced plan</h5>
          </mdb-card-title>
          <div class="card-circle d-flex flex-center mx-auto">
            <mdb-icon fas icon="chart-line" class="indigo-text"></mdb-icon>
          </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>
        </mdb-card-body>

      </mdb-card>
      <!--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.

Basic

10

  • 1 project

  • 100 components

  • 150 features

  • 200 members

Buy now
Pro

20

  • 3 projects

  • 200 components

  • 250 features

  • 300 members

Buy now
Enterprise

30

  • 5 projects

  • 300 components

  • 350 features

  • 400 members

Buy now 
<!--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-->
      <mdb-card class="pricing-card">

        <!--Content-->
        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mt-3">
              <strong>Basic</strong>
            </h5>
          </mdb-card-title>
          <!--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>
        </mdb-card-body>
      </mdb-card>
      <!--Card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">

      <!-- Card -->
      <mdb-card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(8).webp')">

        <!-- Content -->
        <div
          class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">

          <!--Content-->
          <mdb-card-body>
            <mdb-card-title>
              <h5>
                <strong>Pro</strong>
              </h5>
            </mdb-card-title>
            <!--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>
          </mdb-card-body>

        </div>
      </mdb-card>
      <!--Card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <!--Card-->
      <mdb-card class="pricing-card">

        <!--Content-->
        <mdb-card-body>
          <mdb-card-title>
            <h5 class="mt-3">
              <strong>Enterprise</strong>
            </h5>
          </mdb-card-title>
          <!--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>
        </mdb-card-body>

      </mdb-card>
      <!--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-->
      <mdb-card class="pricing-card white-text">
        <!--Price-->
        <div class="header aqua-gradient">
          <h4 class="option">BASIC</h4>
        </div>
        <!--Price-->

        <!--Features-->
        <mdb-card-body class="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>
        </mdb-card-body>
        <!--Features-->

      </mdb-card>
      <!--Pricing card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <!--Pricing card-->
      <mdb-card class="pricing-card white-text">
        <!--Price-->
        <div class="header peach-gradient">
          <h4 class="option">PRO</h4>
        </div>
        <!--Price-->

        <!--Features-->
        <mdb-card-body class="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>
        </mdb-card-body>
        <!--Features-->

      </mdb-card>
      <!--Pricing card-->
    </div>
    <!--Grid column-->

    <!--Grid column-->
    <div class="col-lg-4 col-md-12 mb-4">
      <!--Pricing card-->
      <mdb-card class="pricing-card white-text">
        <!--Price-->
        <div class="header purple-gradient">
          <h4 class="option">ENTERPRISE</h4>
        </div>
        <!--Price-->

        <!--Features-->
        <mdb-card-body class="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>
        </mdb-card-body>
        <!--Features-->

      </mdb-card>
      <!--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.

Edit in sandbox 
import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'
Import example Modules list