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.

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

-
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.
Be the first
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Skyrocket You Sells
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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-->
Questions or feedback?
Let us know