Features

eCommerce features

Set of design blocks dedicated to building eCommerce features sections.


Version 1

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.

Sample image
  • Marketing

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.

  • Entertainment

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.

  • Communication

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.



          <!--Section: Content-->
          <section>

            <!-- Section heading -->
            <h3 class="text-center mb-4">Why is it so great?</h3>
            <!-- Section description -->
            <p class="text-center w-sm-75 mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.</p>

            <!-- Grid row -->
            <div class="row">

              <!-- Grid column -->
              <div class="col-lg-5 text-center text-lg-left">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="Sample image">
              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-lg-7">

                <ul class="list-unstyled fa-ul mb-lg-0 mb-5">
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-share fa-lg text-primary"></i></span>
                    <div>
                      <h5>Marketing</h5>
                      <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.</p>
                    </div>
                  </li>
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-share fa-lg text-primary"></i></span>
                    <div>
                      <h5>Entertainment</h5>
                      <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.</p>
                    </div>
                  </li>
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-share fa-lg text-primary"></i></span>
                    <div>
                      <h5>Communication</h5>
                      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.</p>
                    </div>
                  </li>
                </ul>

              </div>
              <!--Grid column-->

            </div>
            <!-- Grid row -->

          </section>
          <!--Section: Content-->
    
        

Version 2

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.

  • International

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.

  • Experimental

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.

  • Relaxing

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.

Sample image
  • Beloved

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.

  • Rapid

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.

  • Magical

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.



          <!--Section: Content-->
          <section>

            <!-- Section heading -->
            <h3 class="text-center mb-4">Why is it so great?</h3>
            <!-- Section description -->
            <p class="text-center w-sm-75 mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.</p>

            <!-- Grid row -->
            <div class="row">

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

                <ul class="list-unstyled fa-ul mb-lg-0 mb-5">
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-flag-checkered fa-2x text-primary"></i></span>
                    <div>
                      <h5>International</h5>
                      <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.</p>
                    </div>
                  </li>
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-flask fa-2x text-primary"></i></span>
                    <div>
                      <h5>Experimental</h5>
                      <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.</p>
                    </div>
                  </li>
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-glass-martini fa-2x text-primary"></i></span>
                    <div>
                      <h5>Relaxing</h5>
                      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.</p>
                    </div>
                  </li>
                </ul>

              </div>
              <!-- Grid column -->

              <!-- Grid column -->
              <div class="col-lg-4 text-center">
                <img class="img-fluid" src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png"
                  alt="Sample image">
              </div>
              <!-- Grid column -->

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

                <ul class="list-unstyled fa-ul mb-lg-0 mb-5">
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="far fa-heart fa-2x text-primary"></i></span>
                    <div>
                      <h5>Beloved</h5>
                      <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.</p>
                    </div>
                  </li>
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-bolt fa-2x text-primary"></i></span>
                    <div>
                      <h5>Rapid</h5>
                      <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.</p>
                    </div>
                  </li>
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-magic fa-2x text-primary"></i></span>
                    <div>
                      <h5>Magical</h5>
                      <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt magna aliqua uminim veniam.</p>
                    </div>
                  </li>
                </ul>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </section>
          <!--Section: Content-->
  
        

Version 3

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.

  • Marketing

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • Learn more
  • Customization

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • Learn more
  • Support

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

  • Learn more


          <!--Section: Content-->
          <section>

            <!-- Section heading -->
            <h3 class="text-center mb-4">Why is it so great?</h3>
            <!-- Section description -->
            <p class="text-center w-sm-75 mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.</p>

            <!-- Grid row -->
            <div class="row">

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

                <ul class="list-unstyled fa-ul mb-0">
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-bullhorn fa-2x text-primary"></i></span>
                    <div>
                      <h5>Marketing</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                    </div>
                  </li>
                  <li class="pl-4">
                    <a class="btn btn-primary btn-sm">Learn more</a>
                  </li>
                </ul>

              </div>
              <!-- Grid column -->

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

                <ul class="list-unstyled fa-ul mb-0">
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-cogs fa-2x text-primary"></i></span>
                    <div>
                      <h5>Customization</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                    </div>
                  </li>
                  <li class="pl-4">
                    <a class="btn btn-primary btn-sm">Learn more</a>
                  </li>
                </ul>

              </div>
              <!-- Grid column -->

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

                <ul class="list-unstyled fa-ul mb-0">
                  <li class="d-flex justify-content-center pl-4">
                    <span class="fa-li pt-1"><i class="fas fa-tachometer-alt fa-2x text-primary"></i></span>
                    <div>
                      <h5>Support</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                    </div>
                  </li>
                  <li class="pl-4">
                    <a class="btn btn-primary btn-sm">Learn more</a>
                  </li>
                </ul>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row --> 

          </section>
          <!--Section: Content-->
  
        

Version 4

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.

Analytics

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.

Tutorials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.

Support

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.



          <!--Section: Content-->
          <section class="text-center">

            <!-- Section heading -->
            <h3 class="text-center mb-4">Why is it so great?</h3>
            <!-- Section description -->
            <p class="text-center w-sm-75 mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.</p>

            <!-- Grid row -->
            <div class="row">

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

                <i class="fas fa-chart-area fa-3x text-primary"></i>
                <h5 class="my-4">Analytics</h5>
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
                  maiores aperiam minima assumenda deleniti hic.
                </p>

              </div>
              <!-- Grid column -->

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

                <i class="fas fa-book fa-3x text-primary"></i>
                <h5 class="my-4">Tutorials</h5>
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
                  maiores aperiam minima assumenda deleniti hic.
                </p>

              </div>
              <!-- Grid column -->

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

                <i class="far fa-comments fa-3x text-primary"></i>
                <h5 class="my-4">Support</h5>
                <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                  aperiam minima assumenda deleniti hic.
                </p>

              </div>
              <!-- Grid column -->

            </div>
            <!-- Grid row -->

          </section>
          <!--Section: Content-->
  
        

Version 5

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.

Subscription Ready

MailChimp integration included

Block Variety

Develop pages like lego

Color Pallet

Dozen of colors for elements

Page Builder

Drag and drop page design



          <!--Section: Content-->
          <section class="text-center">

            <!-- Section heading -->
            <h3 class="font-weight-bold mb-4">Why is it so great?</h3>
            <!-- Section description -->
            <p class="w-sm-75 mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.</p>

            <div class="row d-flex justify-content-center">
              <div class="col-lg-3 col-md-6 mb-5">
                <i class="fas fa-envelope-open fa-3x text-primary"></i>
                <h5 class="my-4">Subscription Ready</h5>
                <p class="mb-0">MailChimp integration included</p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <i class="fas fa-layer-group fa-3x text-primary"></i>
                <h5 class="my-4">Block Variety</h5>
                <p class="mb-0">Develop pages like lego</p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <i class="fas fa-brush fa-3x text-primary"></i>
                <h5 class="my-4">Color Pallet</h5>
                <p class="mb-0">Dozen of colors for elements</p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <i class="fas fa-puzzle-piece fa-3x text-primary"></i>
                <h5 class="my-4">Page Builder</h5>
                <p class="mb-0">Drag and drop page design</p>
              </div>
            </div>

          </section>
          <!--Section: Content-->
  
        

Version 6

Features

Why is it so great?


Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.

smaple image
Be the first

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

smaple image
Skyrocket You Sells

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

smaple image
Potential Users

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



          <!--Section: Content-->
          <section class="text-center">

            <p class="text-muted text-uppercase small mb-3">Features</p>
            <!-- Section heading -->
            <h3 class="font-weight-bold mb-4">Why is it so great?</h3>
            <hr class="w-header my-4">
            <!-- Section description -->
            <p class="w-sm-75 mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
              quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti voluptas ratione hic.</p>

            <div class="row text-center d-flex justify-content-center">
              <div class="col-md-4 mb-5">
                <div class="view card-img-100 mx-auto">
                  <img src="https://mdbootstrap.com/img/illustrations/drawkit-drawing-man-colour.svg" class="img-fluid" alt="smaple image">
                </div>
                <h5 class="my-4">Be the first</h5>
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
              <div class="col-md-4 mb-5">
                <div class="view card-img-100 mx-auto">
                  <img src="https://mdbootstrap.com/img/illustrations/drawkit-phone-conversation-colour.svg" class="img-fluid" alt="smaple image">
                </div>
                <h5 class="my-4">Skyrocket You Sells</h5>
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
              <div class="col-md-4 mb-5">
                <div class="view card-img-100 mx-auto">
                  <img src="https://mdbootstrap.com/img/illustrations/app-user-colour.svg" class="img-fluid" alt="smaple image">
                </div>
                <h5 class="my-4">Potential Users</h5>
                <p class="mb-0">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                  eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>

          </section>
          <!--Section: Content-->
  
        

Version 7

Be the first

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.

Feature 2

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.

Feature 3

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.

Feature 4

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.

Feature 5

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.

Feature 6

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.

Feature 7

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.

Feature 8

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.



          <!--Section: Content-->
          <section>

            <div class="row">
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="far fa-paper-plane text-primary pr-2"></i> Be the first
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="fas fa-pen-alt text-primary pr-2"></i> Feature 2
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="fas fa-user text-primary pr-2"></i> Feature 3
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="fas fa-rocket text-primary pr-2"></i> Feature 4
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="fas fa-home text-primary pr-2"></i> Feature 5
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="fas fa-book-open text-primary pr-2"></i> Feature 6
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="fas fa-book text-primary pr-2"></i> Feature 7
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
              <div class="col-lg-3 col-md-6 mb-5">
                <h5>
                  <i class="fas fa-paper-plane text-primary pr-2"></i> Feature 8
                </h5>
                <p class="mb-0">
                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna sit eres aliqua.
                </p>
              </div>
            </div>

          </section>
          <!--Section: Content-->