UI Kit
<!-- Pricing Style 1 (Default) -->
<div class="pricing-plans">
<!-- Pricing Switch -->
<ul class="nav nav-tabs nav-tabs-style-3 pricing-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#" data-toggle="price" data-period="monthly">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="price" data-period="yearly">Yearly <sup>-20%</sup></a>
</li>
</ul>
<div class="row">
<!-- Pricing Plan-->
<div class="col-xl-4 col-sm-6 mb-30 pb-3">
<div class="pricing-card">
<span class="badge badge-success">Best Offer</span>
<div class="pricing-card-body">
<img class="pricing-card-image" src="path-to-image" alt="Starter Plan">
<h5>Starter</h5>
<div class="pricing-card-price monthly active"><span>$</span>40</div>
<div class="pricing-card-price yearly"><span>$</span>32</div>
<span class="text-muted">per month</span>
<ul class="list-icon d-table mx-auto pt-4 text-left">
<li><i class="fe-icon-check-circle text-muted"></i>Storage space: <strong>4GB</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Community support</li>
<li><i class="fe-icon-check-circle text-muted"></i>Expert reviews: <strong>5 projects</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Traffic: <strong>2GB</strong></li>
</ul>
</div>
<div class="pricing-card-button"><a class="btn btn-style-5 btn-primary" href="#">Buy Now</a></div>
</div>
</div>
<!-- Pricing Plan-->
<div class="col-xl-4 col-sm-6 mb-30 pb-3">
<div class="pricing-card border-primary">
<span class="badge badge-warning">Most Popular</span>
<div class="pricing-card-body">
<img class="pricing-card-image" src="path-to-image" alt="Team Plan">
<h5>Team</h5>
<div class="pricing-card-price monthly active"><span>$</span>70</div>
<div class="pricing-card-price yearly"><span>$</span>56</div>
<span class="text-muted">per month</span>
<ul class="list-icon d-table mx-auto pt-4 text-left">
<li><i class="fe-icon-check-circle text-muted"></i>Storage space: <strong>16GB</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Premium support 24/7</li>
<li><i class="fe-icon-check-circle text-muted"></i>Expert reviews: <strong>10 projects</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Traffic: <strong>5GB</strong></li>
</ul>
</div>
<div class="pricing-card-button"><a class="btn btn-style-5 btn-gradient" href="#">Buy Now</a></div>
</div>
</div>
<!-- Pricing Plan-->
<div class="col-xl-4 col-sm-6 mb-30 pb-3">
<div class="pricing-card">
<span class="badge badge-danger">Rich Features</span>
<div class="pricing-card-body">
<img class="pricing-card-image" src="path-to-image" alt="Premium Plan">
<h5>Premium</h5>
<div class="pricing-card-price monthly active"><span>$</span>100</div>
<div class="pricing-card-price yearly"><span>$</span>80</div>
<span class="text-muted">per month</span>
<ul class="list-icon d-table mx-auto pt-4 text-left">
<li><i class="fe-icon-check-circle text-muted"></i>Storage space: <strong>Unlimited</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Premium support 24/7</li>
<li><i class="fe-icon-check-circle text-muted"></i>Expert reviews: <strong>Unlimited</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Traffic: <strong>Unlimited</strong></li>
</ul>
</div>
<div class="pricing-card-button"><a class="btn btn-style-5 btn-primary" href="#">Buy Now</a></div>
</div>
</div>
</div>
</div>//- Pricing Style 1 (Default)
.pricing-plans
//- Pricing Switch
ul.nav.nav-tabs.nav-tabs-style-3.pricing-tabs.justify-content-end
li.nav-item
a(href="#" class="nav-link active" data-toggle="price" data-period="monthly") Monthly
li.nav-item
a(href="#" class="nav-link" data-toggle="price" data-period="yearly")
| Yearly
sup -20%
.row
//- Pricing Plan
.col-xl-4.col-sm-6.mb-30.pb-3
.pricing-card
span.badge.badge-success Best Offer
.pricing-card-body
img(src="path-to-image" alt="Starter Plan").pricing-card-image
h5 Starter
.pricing-card-price.monthly.active <span>$</span>40
.pricing-card-price.yearly <span>$</span>32
span.text-muted per month
ul.list-icon.d-table.mx-auto.pt-4.text-left
li
i.fe-icon-check-circle.text-muted
| Storage space: <strong>4GB</strong>
li
i.fe-icon-check-circle.text-muted
| Community support
li
i.fe-icon-check-circle.text-muted
| Expert reviews: <strong>5 projects</strong>
li
i.fe-icon-check-circle.text-muted
| Traffic: <strong>2GB</strong>
.pricing-card-button
a(href="#").btn.btn-style-5.btn-primary Buy Now
//- Pricing Plan
.col-xl-4.col-sm-6.mb-30.pb-3
.pricing-card.border-primary
span.badge.badge-warning Most Popular
.pricing-card-body
img(src="path-to-image" alt="Team Plan").pricing-card-image
h5 Team
.pricing-card-price.monthly.active <span>$</span>70
.pricing-card-price.yearly <span>$</span>56
span.text-muted per month
ul.list-icon.d-table.mx-auto.pt-4.text-left
li
i.fe-icon-check-circle.text-muted
| Storage space: <strong>16GB</strong>
li
i.fe-icon-check-circle.text-muted
| Premium support 24/7
li
i.fe-icon-check-circle.text-muted
| Expert reviews: <strong>10 projects</strong>
li
i.fe-icon-check-circle.text-muted
| Traffic: <strong>5GB</strong>
.pricing-card-button
a(href="#").btn.btn-style-5.btn-gradient Buy Now
//- Pricing Plan
.col-xl-4.col-sm-6.mb-30.pb-3
.pricing-card
span.badge.badge-danger Rich Features
.pricing-card-body
img(src="path-to-image" alt="Premium Plan").pricing-card-image
h5 Premium
.pricing-card-price.monthly.active <span>$</span>100
.pricing-card-price.yearly <span>$</span>80
span.text-muted per month
ul.list-icon.d-table.mx-auto.pt-4.text-left
li
i.fe-icon-check-circle.text-muted
| Storage space: <strong>Unlimited</strong>
li
i.fe-icon-check-circle.text-muted
| Premium support 24/7
li
i.fe-icon-check-circle.text-muted
| Expert reviews: <strong>Unlimited</strong>
li
i.fe-icon-check-circle.text-muted
| Traffic: <strong>Unlimited</strong>
.pricing-card-button
a(href="#").btn.btn-style-5.btn-primary Buy Now<!-- Pricing Style 2 (Inside Card) -->
<div class="pricing-plans">
<!-- Pricing Switch -->
<ul class="nav nav-tabs nav-tabs-style-3 pricing-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#" data-toggle="price" data-period="monthly">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="price" data-period="yearly">Yearly <sup>-20%</sup></a>
</li>
</ul>
<div class="row">
<!-- Pricing Plan-->
<div class="col-xl-4 col-sm-6 mb-30 pb-3">
<div class="card pricing-card">
<div class="card-body text-center">
<span class="badge badge-success">Best Offer</span>
<h5 class="pt-3">Starter</h5>
<div class="pricing-card-price monthly active"><span>$</span>40</div>
<div class="pricing-card-price yearly"><span>$</span>32</div>
<span class="text-muted">per month</span>
<ul class="list-icon d-table mx-auto pt-4 text-left">
<li><i class="fe-icon-check-circle text-muted"></i>Storage space: <strong>4GB</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Community support</li>
<li><i class="fe-icon-check-circle text-muted"></i>Expert reviews: <strong>5 projects</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Traffic: <strong>2GB</strong></li>
</ul>
</div>
<div class="card-footer text-center">
<a class="btn btn-primary" href="#">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Plan-->
<div class="col-xl-4 col-sm-6 mb-30 pb-3">
<div class="card pricing-card border border-primary">
<div class="card-body text-center">
<span class="badge badge-warning">Most Popular</span>
<h5 class="pt-3">Team</h5>
<div class="pricing-card-price monthly active"><span>$</span>70</div>
<div class="pricing-card-price yearly"><span>$</span>56</div>
<span class="text-muted">per month</span>
<ul class="list-icon d-table mx-auto pt-4 text-left">
<li><i class="fe-icon-check-circle text-muted"></i>Storage space: <strong>16GB</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Premium support 24/7</li>
<li><i class="fe-icon-check-circle text-muted"></i>Expert reviews: <strong>10 projects</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Traffic: <strong>5GB</strong></li>
</ul>
</div>
<div class="card-footer text-center">
<a class="btn btn-gradient" href="#">Buy Now</a>
</div>
</div>
</div>
<!-- Pricing Plan-->
<div class="col-xl-4 col-sm-6 mb-30 pb-3">
<div class="card pricing-card">
<div class="card-body text-center">
<span class="badge badge-danger">Rich Features</span>
<h5 class="pt-3">Premium</h5>
<div class="pricing-card-price monthly active"><span>$</span>100</div>
<div class="pricing-card-price yearly"><span>$</span>80</div>
<span class="text-muted">per month</span>
<ul class="list-icon d-table mx-auto pt-4 text-left">
<li><i class="fe-icon-check-circle text-muted"></i>Storage space: <strong>Unlimited</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Premium support 24/7</li>
<li><i class="fe-icon-check-circle text-muted"></i>Expert reviews: <strong>Unlimited</strong></li>
<li><i class="fe-icon-check-circle text-muted"></i>Traffic: <strong>Unlimited</strong></li>
</ul>
</div>
<div class="card-footer text-center">
<a class="btn btn-primary" href="#">Buy Now</a>
</div>
</div>
</div>
</div>
</div>//- Pricing Style 2 (Inside Card)
.pricing-plans
//- Pricing Switch
ul.nav.nav-tabs.nav-tabs-style-3.pricing-tabs.justify-content-end
li.nav-item
a(href="#" class="nav-link active" data-toggle="price" data-period="monthly") Monthly
li.nav-item
a(href="#" class="nav-link" data-toggle="price" data-period="yearly")
| Yearly
sup -20%
.row
//- Pricing Plan
.col-xl-4.col-sm-6.mb-30.pb-3
.card.pricing-card
.card-body.text-center
span.badge.badge-success Best Offer
h5.pt-3 Starter
.pricing-card-price.monthly.active <span>$</span>40
.pricing-card-price.yearly <span>$</span>32
span.text-muted per month
ul.list-icon.d-table.mx-auto.pt-4.text-left
li
i.fe-icon-check-circle.text-muted
| Storage space: <strong>4GB</strong>
li
i.fe-icon-check-circle.text-muted
| Community support
li
i.fe-icon-check-circle.text-muted
| Expert reviews: <strong>5 projects</strong>
li
i.fe-icon-check-circle.text-muted
| Traffic: <strong>2GB</strong>
.card-footer.text-center
a(href="#").btn.btn-primary Buy Now
//- Pricing Plan
.col-xl-4.col-sm-6.mb-30.pb-3
.card.pricing-card.border.border-primary
.card-body.text-center
span.badge.badge-warning Most Popular
h5.pt-3 Team
.pricing-card-price.monthly.active <span>$</span>70
.pricing-card-price.yearly <span>$</span>56
span.text-muted per month
ul.list-icon.d-table.mx-auto.pt-4.text-left
li
i.fe-icon-check-circle.text-muted
| Storage space: <strong>16GB</strong>
li
i.fe-icon-check-circle.text-muted
| Premium support 24/7
li
i.fe-icon-check-circle.text-muted
| Expert reviews: <strong>10 projects</strong>
li
i.fe-icon-check-circle.text-muted
| Traffic: <strong>5GB</strong>
.card-footer.text-center
a(href="#").btn.btn-gradient Buy Now
//- Pricing Plan
.col-xl-4.col-sm-6.mb-30.pb-3
.card.pricing-card
.card-body.text-center
span.badge.badge-danger Rich Features
h5.pt-3 Premium
.pricing-card-price.monthly.active <span>$</span>100
.pricing-card-price.yearly <span>$</span>80
span.text-muted per month
ul.list-icon.d-table.mx-auto.pt-4.text-left
li
i.fe-icon-check-circle.text-muted
| Storage space: <strong>Unlimited</strong>
li
i.fe-icon-check-circle.text-muted
| Premium support 24/7
li
i.fe-icon-check-circle.text-muted
| Expert reviews: <strong>Unlimited</strong>
li
i.fe-icon-check-circle.text-muted
| Traffic: <strong>Unlimited</strong>
.card-footer.text-center
a(href="#").btn.btn-primary Buy Now
