Bootstrap eCommerce sections

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 accusamus veniam.

Denim

Denim trousers

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

Shoes

High heels

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

Outwear

Brown coat

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

Blouses

Shirt

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

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card cascade narrow ecommerce>
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/1.jpg" waves top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="grey-text">
                <h5>Denim</h5>
              </a>
              <card-title>
                <strong>
                  <a href="">Denim trousers</a>
                </strong>
              </card-title>
              <ul class="rating">
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star-o"></fa>
                </li>
              </ul>
              <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</card-text>
              <card-footer color="white" textColor="black" class="px-1">
                <span class="float-left font-weight-bold">
                  <strong>49$</strong>
                </span>
                <span class="float-right">
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to cart
                      </div>
                      <fa slot="reference" icon="shopping-cart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Share
                      </div>
                      <fa slot="reference" icon="share-alt" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a class="active">
                    <tooltip trigger="hover" class="active" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Added to watchlist
                      </div>
                      <fa slot="reference" icon="heart" class="ml-3"></fa>
                    </tooltip>
                  </a>
                </span>
              </card-footer>
            </card-body>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card cascade narrow ecommerce>
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/2.jpg" waves top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="grey-text">
                <h5>Shoes</h5>
              </a>
              <card-title>
                <strong>
                  <a href="">High heels</a>
                </strong>
              </card-title>
              <ul class="rating">
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
              </ul>
              <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</card-text>
              <card-footer color="white" textColor="black" class="px-1">
                <span class="float-left font-weight-bold">
                  <strong>59$</strong>
                </span>
                <span class="float-right">
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to cart
                      </div>
                      <fa slot="reference" icon="shopping-cart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Share
                      </div>
                      <fa slot="reference" icon="share-alt" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to watchlist
                      </div>
                      <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                </span>
              </card-footer>
            </card-body>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card cascade narrow ecommerce>
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/4.jpg" waves top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="grey-text">
                <h5>Outwear</h5>
              </a>
              <card-title>
                <strong>
                  <a href="">Brown coat</a>
                </strong>
              </card-title>
              <ul class="rating">
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star-half-full"></fa>
                </li>
              </ul>
              <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</card-text>
              <card-footer color="white" textColor="black" class="px-1">
                <span class="float-left font-weight-bold">
                  <strong>89$</strong>
                </span>
                <span class="float-right">
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to cart
                      </div>
                      <fa slot="reference" icon="shopping-cart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Share
                      </div>
                      <fa slot="reference" icon="share-alt" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to watchlist
                      </div>
                      <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                </span>
              </card-footer>
            </card-body>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card cascade narrow ecommerce>
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/3.jpg" waves top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="grey-text">
                <h5>Blouses</h5>
              </a>
              <card-title>
                <strong>
                  <a href="">Shirt</a>
                </strong>
              </card-title>
              <ul class="rating">
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star"></fa>
                </li>
                <li>
                  <fa icon="star-o"></fa>
                </li>
              </ul>
              <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit.</card-text>
              <card-footer color="white" textColor="black" class="px-1">
                <span class="float-left font-weight-bold">
                  <strong>119$</strong>
                </span>
                <span class="float-right">
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to cart
                      </div>
                      <fa slot="reference" icon="shopping-cart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Share
                      </div>
                      <fa slot="reference" icon="share-alt" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a class="active">
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Added to watchlist
                      </div>
                      <fa slot="reference" icon="heart" class="ml-3"></fa>
                    </tooltip>
                  </a>
                </span>
              </card-footer>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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 accusamus veniam.

Camera

GoPro

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

Photography

Camera

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

Smartphone

iPhone 6S

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

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card wide ecommerce>
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (55).jpg" top alt="sample photo" />
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="text-muted">
                <h5>Camera</h5>
              </a>
              <card-title>
                <strong><a href="">GoPro</a></strong>
              </card-title>
              <card-text>Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</card-text>
              <card-footer color="white" textColor="black" class="px-1">
                <span class="float-left font-weight-bold">
                  <strong>1439$</strong>
                </span>
                <span class="float-right">
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Quick look
                      </div>
                      <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to watchlist
                      </div>
                      <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                </span>
              </card-footer>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card wide ecommerce>
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (49).jpg" top alt="sample photo" />
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="text-muted">
                <h5>Photography</h5>
              </a>
              <card-title>
                <strong><a href="">Camera</a></strong>
              </card-title>
              <card-text>Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</card-text>
              <card-footer color="white" textColor="black" class="px-1">
                <span class="float-left font-weight-bold">
                  <strong>1160$</strong>
                </span>
                <span class="float-right">
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Quick look
                      </div>
                      <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to watchlist
                      </div>
                      <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                </span>
              </card-footer>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card wide ecommerce>
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg" top alt="sample photo" />
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="text-muted">
                <h5>Smartphone</h5>
              </a>
              <card-title>
                <strong><a href="">iPhone 6S</a></strong>
              </card-title>
              <card-text>Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit.</card-text>
              <card-footer color="white" textColor="black" class="px-1">
                <span class="float-left font-weight-bold">
                  <strong>2160$</strong>
                </span>
                <span class="float-right">
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Quick look
                      </div>
                      <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                  <a>
                    <tooltip trigger="hover" :options="{placement: 'top'}">
                      <div class="tooltip">
                        Add to watchlist
                      </div>
                      <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                    </tooltip>
                  </a>
                </span>
              </card-footer>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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 accusamus veniam.

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card class="align-items-center">
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12.jpg" top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="grey-text">
                <h5>Shirt</h5>
              </a>
              <h5>
                <strong>
                  <a href="" class="dark-grey-text">Denim shirt <badge pill color="danger-color">NEW</badge></a>
                </strong>
              </h5>
              <h4 class="font-weight-bold blue-text">
                <strong>120$</strong>
              </h4>
            </card-body>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card class="align-items-center">
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13.jpg" top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <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>
            </card-body>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card class="align-items-center">
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14.jpg" top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <a href="" class="grey-text">
                <h5>Sport wear</h5>
              </a>
              <h5>
                <strong>
                  <a href="" class="dark-grey-text">Grey blouse <badge pill color="primary-color">BEST</badge></a>
                </strong>
              </h5>
              <h4 class="font-weight-bold blue-text">
                <strong>99$</strong>
              </h4>
            </card-body>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card class="align-items-center">
            <view-wrapper overlay="white-slight">
              <card-img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15.jpg" top alt="sample photo"/>
            </view-wrapper>
            <card-body class="text-center">
              <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>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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 accusamus veniam.

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card collection class="z-depth-1-half">
            <div class="view zoom">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg" class="img-fluid" alt=""/>
              <div class="stripe dark">
                <a>
                  <p>Red trousers <fa icon="angle-right"></fa></p>
                </a>
              </div>
            </div>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card collection class="z-depth-1-half">
            <div class="view zoom">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg" class="img-fluid" alt=""/>
              <div class="stripe light">
                <a>
                  <p>Sweatshirt <fa icon="angle-right"></fa></p>
                </a>
              </div>
            </div>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card collection class="z-depth-1-half">
            <div class="view zoom">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/9.jpg" class="img-fluid" alt=""/>
              <div class="stripe dark">
                <a>
                  <p>Accessories <fa icon="angle-right"></fa></p>
                </a>
              </div>
            </div>
          </card>
        </column>
        <column lg="3" md="6" class="mb-lg-0 mb-4">
          <card collection class="z-depth-1-half">
            <div class="view zoom">
              <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg" class="img-fluid" alt=""/>
              <div class="stripe light">
                <a>
                  <p>Sweatshirt <fa icon="angle-right"></fa></p>
                </a>
              </div>
            </div>
          </card>
        </column>
      </row>
    </section> 
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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 accusamus veniam.

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <carousel :interval="8000" @defineInterval="handleIntervalChange" multi>
        <carousel-navigation top @changeSlide="handleChangeSlide"></carousel-navigation>
        <carousel-indicators>
          <carousel-indicator :index="0" :class="{active: show[0]}" @changeSlide="handleChangeSlide"></carousel-indicator>
          <carousel-indicator :index="1" :class="{active: show[1]}" @changeSlide="handleChangeSlide"></carousel-indicator>
          <carousel-indicator :index="2" :class="{active: show[2]}" @changeSlide="handleChangeSlide"></carousel-indicator>
        </carousel-indicators>
          <carousel-inner>
            <row>
              <carousel-item :class="{active: show[0]}">
                <column md="4">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(39).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Shoes</h5>
                      </a>
                      <card-title><strong><a href="">Leather boots</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">69$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
                <column md="4" class="clearfix d-none d-md-block">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(22).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Jeans</h5>
                      </a>
                      <card-title><strong><a href="">Slim jeans</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">99$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
                <column md="4" class="clearfix d-none d-md-block">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Others/img%20(31).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Shorts</h5>
                      </a>
                      <card-title><strong><a href="">Denim shorts</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">49$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
              </carousel-item>
              <carousel-item :class="{active: show[1]}">
                <column md="4">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(30).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Shoes</h5>
                      </a>
                      <card-title><strong><a href="">Leather boots</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">69$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
                <column md="4" class="clearfix d-none d-md-block">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(37).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Jeans</h5>
                      </a>
                      <card-title><strong><a href="">Slim jeans</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">99$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
                <column md="4" class="clearfix d-none d-md-block">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Others/img%20(35).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Shorts</h5>
                      </a>
                      <card-title><strong><a href="">Denim shorts</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">49$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
              </carousel-item>
              <carousel-item :class="{active: show[2]}">
                <column md="4">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(32).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Shoes</h5>
                      </a>
                      <card-title><strong><a href="">Leather boots</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">69$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
                <column md="4" class="clearfix d-none d-md-block">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img%20(33).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Jeans</h5>
                      </a>
                      <card-title><strong><a href="">Slim jeans</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">99$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
                <column md="4" class="clearfix d-none d-md-block">
                  <card cascade narrow ecommerce class="mb-2">
                    <view-wrapper overlay="white-slight">
                      <card-img waves top src="https://mdbootstrap.com/img/Photos/Others/img%20(38).jpg" alt="sample photo"/>
                    </view-wrapper>
                    <card-body>
                      <a href="" class="text-muted">
                        <h5>Shorts</h5>
                      </a>
                      <card-title><strong><a href="">Denim shorts</a></strong></card-title>
                      <card-text>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci.</card-text>
                      <card-footer color="white" textColor="black" class="px-1">
                        <span class="float-left">49$</span>
                        <span class="float-right">
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Quick look
                              </div>
                              <fa slot="reference" icon="eye" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                          <a>
                            <tooltip trigger="hover" :options="{placement: 'top'}">
                              <div class="tooltip">
                                Add to watchlist
                              </div>
                              <fa slot="reference" icon="heart" class="grey-text ml-3"></fa>
                            </tooltip>
                          </a>
                        </span>
                      </card-footer>
                    </card-body>
                  </card>
                </column>
              </carousel-item>
            </row>
          </carousel-inner>
      </carousel>
    </section>   
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Carousel, CarouselIndicators, CarouselIndicator, CarouselInner, CarouselItem, CarouselNavigation, CarouselCaption, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Carousel,
    CarouselIndicators,
    CarouselIndicator,
    CarouselInner,
    CarouselItem,
    CarouselNavigation,
    CarouselCaption,
    Testimonial,
    Avatar
  },
  data() {
    return {
      page: 0,
      items: '',
      interval: 10000,
      show: { 0: true, 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false }
    };
  },
  methods: {
    slidePage(target) {
      if (target === "next") {
        if (this.page < this.items) {
          this.show[this.page] = false;
          this.page++;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page = 0;
          this.show[this.page] = true;
        }
      } else if (target === "prev") {
        if (this.page == 0) {
          this.show[this.page] = false;
          this.page = this.items;
          this.show[this.page] = true;
        } else {
          this.show[this.page] = false;
          this.page--;
          this.show[this.page] = true;
        }
      } else {
        this.show[this.page] = false;
        this.page = target;
        this.show[this.page] = true;
      }
    },
    autoSlide() {
      this.slide = setInterval(() => {
        this.slidePage('next');
      }, this.interval);
    },
    handleChangeSlide(showSlide) {
      this.slidePage(showSlide.slideIndex);
      clearInterval(this.slide);
      this.autoSlide();
    },
    handleIntervalChange(defineInterval) {
      this.interval = defineInterval.newInterval;
    }
  },
  mounted() {
    this.items = this.$el.querySelectorAll('.carousel-item').length - 1;
    this.autoSlide();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carousel,
.carousel-item,
.carousel-item.active {
  height: 100%;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
}

.carousel-item {
  display: block !important;
  visibility: hidden;
  height: 0;
  opacity: 0;
  transition: transform 0ms ease-in-out, opacity .6s ease-in;
  transform: translate3d(0, 0, 0) !important;
}

.carousel-item.active {
  opacity: 1;
  left: auto;
  height: auto;
  visibility: visible;
  transform: translate3d(0, 0, 0) !important;
}
</style>
            
        

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

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing>
            <div class="price header white-text blue rounded-top">
              <h2 class="number">10</h2>
              <div class="version">
                <h5 class="mb-0">Basic</h5>
              </div>
            </div>
            <card-body class="striped mb-1">
              <ul>
                <li>
                  <p class="mt-2"><fa icon="check" class="green-text pr-2"></fa>20 GB Of Storage</p>
                </li>
                <li>
                  <p><fa icon="check" class="green-text pr-2"></fa>2 Email Accounts</p>
                </li>
                <li>
                  <p><fa icon="times" class="red-text pr-2"></fa>24h Tech Support</p>
                </li>
                <li>
                  <p><fa icon="times" class="red-text pr-2"></fa>300 GB Bandwidth</p>
                </li>
                <li>
                  <p><fa icon="times" class="red-text pr-2"></fa>User Management </p>
                </li>
              </ul>
              <btn color="blue">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing>
            <div class="price header white-text indigo rounded-top">
              <h2 class="number">20</h2>
              <div class="version">
                <h5 class="mb-0">Pro</h5>
              </div>
            </div>
            <card-body class="striped mb-1">
              <ul>
                <li>
                  <p class="mt-2"><fa icon="check" class="green-text pr-2"></fa>20 GB Of Storage</p>
                </li>
                <li>
                  <p><fa icon="check" class="green-text pr-2"></fa>4 Email Accounts</p>
                </li>
                <li>
                  <p><fa icon="check" class="green-text pr-2"></fa>24h Tech Support</p>
                </li>
                <li>
                  <p><fa icon="times" class="red-text pr-2"></fa>300 GB Bandwidth</p>
                </li>
                <li>
                  <p><fa icon="times" class="red-text pr-2"></fa>User Management </p>
                </li>
              </ul>
              <btn color="indigo">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing>
            <div class="price header white-text deep-purple rounded-top">
              <h2 class="number">30</h2>
              <div class="version">
                <h5 class="mb-0">Enterprise</h5>
              </div>
            </div>
            <card-body class="striped mb-1">
              <ul>
                <li>
                  <p class="mt-2"><fa icon="check" class="green-text pr-2"></fa>20 GB Of Storage</p>
                </li>
                <li>
                  <p><fa icon="check" class="green-text pr-2"></fa>5 Email Accounts</p>
                </li>
                <li>
                  <p><fa icon="check" class="green-text pr-2"></fa>24h Tech Support</p>
                </li>
                <li>
                  <p><fa icon="check" class="green-text pr-2"></fa>300 GB Bandwidth</p>
                </li>
                <li>
                  <p><fa icon="check" class="green-text pr-2"></fa>User Management </p>
                </li>
              </ul>
              <btn color="deep-purple">Buy now</btn>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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
            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">
            <div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
              <card-body>
                <h5>Basic</h5>
                <div class="price pt-0">
                  <h2 class="number mb-0">10</h2>
                </div>
                <ul class="striped mb-0">
                  <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>
                <btn outline="white" color="white">Buy now</btn>
              </card-body>
            </div>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">
            <div class="text-white text-center pricing-card d-flex align-items-center rgba-teal-strong py-3 px-3 rounded">
              <card-body>
                <h5>Pro</h5>
                <div class="price pt-0">
                  <h2 class="number mb-0">20</h2>
                </div>
                <ul class="striped mb-0">
                  <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>
                  <li>
                    <p><strong>350</strong> messages</p>
                  </li>
                </ul>
                <btn outline="white" color="white">Buy now</btn>
              </card-body>
            </div>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card class="card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">
            <div class="text-white text-center pricing-card d-flex align-items-center rgba-stylish-strong py-3 px-3 rounded">
              <card-body>
                <h5>Enterprise</h5>
                <div class="price pt-0">
                  <h2 class="number mb-0">30</h2>
                </div>
                <ul class="striped mb-0">
                  <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>
                  <li>
                    <p><strong>450</strong> messages</p>
                  </li>
                </ul>
                <btn outline="white" color="white">Buy now</btn>
              </card-body>
            </div>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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
            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card>        
            <card-body>
              <h5 class="mb-4">Basic plan</h5>
              <div class="d-flex justify-content-center">
                <div class="card-circle d-flex justify-content-center align-items-center">
                  <fa icon="home" class="light-blue-text"></fa>
                </div>
              </div>
              <h2 class="font-weight-bold my-4">59$</h2>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p>
              <btn rounded color="light-blue">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card class="purple-gradient">        
            <card-body class="white-text">
              <h5 class="mb-4">Premium plan</h5>
              <div class="d-flex justify-content-center">
                <div class="card-circle d-flex justify-content-center align-items-center">
                  <fa icon="group" class="white-text"></fa>
                </div>
              </div>
              <h2 class="font-weight-bold my-4">79$</h2>
              <p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.</p>
              <btn outline="white" rounded color="white">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card>        
            <card-body>
              <h5 class="mb-4">Advanced plan</h5>
              <div class="d-flex justify-content-center">
                <div class="card-circle d-flex justify-content-center align-items-center">
                  <fa icon="bar-chart" class="light-blue-text"></fa>
                </div>
              </div>
              <h2 class="font-weight-bold my-4">99$</h2>
              <p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
              <btn rounded color="light-blue">Buy now</btn>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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
            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card>        
            <card-body>
              <h5 class="mb-4">Basic plan</h5>
              <div class="d-flex justify-content-center">
                <div class="card-circle d-flex justify-content-center align-items-center">
                  <fa icon="home" class="indigo-text"></fa>
                </div>
              </div>
              <h2 class="font-weight-bold my-4">59$</h2>
              <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa pariatur id nobis accusamus deleniti cumque hic laborum.</p>
              <btn rounded color="indigo">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card class="indigo">        
            <card-body class="white-text">
              <h5 class="mb-4">Premium plan</h5>
              <div class="d-flex justify-content-center">
                <div class="card-circle d-flex justify-content-center align-items-center">
                  <fa icon="group" class="white-text"></fa>
                </div>
              </div>
              <h2 class="font-weight-bold my-4">79$</h2>
              <p>Esse corporis saepe laudantium velit adipisci cumque iste ratione facere non distinctio cupiditate sequi atque.</p>
              <btn outline="white" rounded color="white">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card>        
            <card-body>
              <h5 class="mb-4">Advanced plan</h5>
              <div class="d-flex justify-content-center">
                <div class="card-circle d-flex justify-content-center align-items-center">
                  <fa icon="bar-chart" class="indigo-text"></fa>
                </div>
              </div>
              <h2 class="font-weight-bold my-4">99$</h2>
              <p class="grey-text">At ab ea a molestiae corrupti numquam quo beatae minima ratione magni accusantium repellat eveniet quia vitae.</p>
              <btn rounded color="indigo">Buy now</btn>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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
            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing>
            <card-body>
              <h5 class="font-weight-bold mt-3">Basic</h5>
              <div class="price pt-0">
                <h2 class="number red-text mb-0">10</h2>
              </div>
              <ul class="striped mb-1">
                <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>
              <btn rounded color="danger" class="mb-4">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card class="card-img" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(6).jpg')">
            <div class="text-white text-center pricing-card d-flex align-items-center rgba-indigo-strong py-3 px-3 rounded">
              <card-body>
                <h5 class="font-weight-bold mt-2">Pro</h5>
                <div class="price pt-0">
                  <h2 class="number mb-0">20</h2>
                </div>
                <ul class="striped mb-0">
                  <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>
                  <li>
                    <p><strong>350</strong> messages</p>
                  </li>
                </ul>
                <btn outline="white" rounded color="white">Buy now</btn>
              </card-body>
            </div>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing>
            <card-body>
              <h5 class="font-weight-bold mt-3">Enterprise</h5>
              <div class="price pt-0">
                <h2 class="number mb-0">30</h2>
              </div>
              <ul class="striped mb-1">
                <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>
                <li>
                  <p><strong>450</strong> messages</p>
                </li>
              </ul>
              <btn rounded color="danger" class="mb-4">Buy now</btn>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
            
        

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

            
<template>
  <container>
    <section class="text-center my-5">
      <h2 class="h1-responsive font-weight-bold text-center my-5">Our pricing plans</h2>
      <p class="grey-text text-center w-responsive mx-auto 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 veniam.</p>
      <row>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing class="white-text">
            <div class="aqua-gradient rounded-top">
              <h4 class="option" style="padding: 2.5rem; marginBottom: 0; fontWeight: 500">BASIC</h4>
            </div>
            <card-body class="striped green-striped card-background px-5">
              <h2 class="my-4 pb-3 h1">20$</h2>
              <ul>
                <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>
              <btn rounded gradient="aqua" class="mb-3 mt-3">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing class="white-text">
            <div class="peach-gradient rounded-top">
              <h4 class="option" style="padding: 2.5rem; marginBottom: 0; fontWeight: 500">PRO</h4>
            </div>
            <card-body class="striped orange-striped card-background px-5">
              <h2 class="my-4 pb-3 h1">80$</h2>
              <ul>
                <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>
              <btn rounded gradient="peach" class="mb-3 mt-3">Buy now</btn>
            </card-body>
          </card>
        </column>
        <column lg="4" md="12" class="mb-lg-0 mb-4">
          <card pricing class="white-text">
            <div class="purple-gradient rounded-top">
              <h4 class="option" style="padding: 2.5rem; marginBottom: 0; fontWeight: 500">ENTERPRISE</h4>
            </div>
            <card-body class="striped purple-striped card-background px-5">
              <h2 class="my-4 pb-3 h1">100$</h2>
              <ul>
                <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>
              <btn rounded gradient="purple" class="mb-3 mt-3">Buy now</btn>
            </card-body>
          </card>
        </column>
      </row>
    </section>
  </container>
</template>

<script>
import { Container, Row, Column, Card, CardImg, CardBody, CardTitle, CardFooter, CardText, Fa, Btn, Tooltip, Badge, ViewWrapper, Testimonial, Avatar  } from 'mdbvue';

export default {
  name: 'EcommercePage',
  components: {
    Container,
    Row,
    Column,
    Card,
    CardImg,
    CardBody,
    CardTitle,
    CardFooter,
    CardText,
    Fa,
    Btn,
    Tooltip,
    Badge,
    ViewWrapper,
    Testimonial,
    Avatar
  },
  data() {
    return {
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>