Buy now
Pricing
Quickly build pricing plans for subscription based pricing model.
Finder component
Basic example
Easy Start
$5
/month
- 3x more views
- Top ads for 3 days
- Moving up the list
- Featured badge in the results
Fast Sale
$15
/month
- 10x more views
- Top ads for 5 days
- Moving up the list
- Featured badge in the results
<!-- Default pricing plan -->
<div class="card">
<div class="card-body">
<img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
<h2 class="h5 fw-normal text-center py-1 mb-0">Easy Start</h2>
<div class="d-flex align-items-end justify-content-center mb-4">
<div class="h1 mb-0">$5</div>
<div class="pb-2 ps-2">/month</div>
</div>
<ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span>3x more views</span>
</li>
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span>Top ads for 3 days</span>
</li>
<li class="d-flex text-muted">
<i class="fi-x fs-xs mt-2 me-2"></i>
<span>Moving up the list</span>
</li>
<li class="d-flex text-muted">
<i class="fi-x fs-xs mt-2 me-2"></i>
<span>Featured badge in the results</span>
</li>
</ul>
</div>
<div class="card-footer py-2 border-0">
<div class="border-top text-center pt-4 pb-3">
<a href="#" class="btn btn-outline-primary rounded-pill">Choose plan</a>
</div>
</div>
</div>
<!-- Popular pricing plan -->
<div class="card shadow">
<div class="card-body">
<img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
<h2 class="h5 fw-normal text-center py-1 mb-0">Fast Sale</h2>
<div class="d-flex align-items-end justify-content-center mb-4">
<div class="h1 mb-0">$15</div>
<div class="pb-2 ps-2">/month</div>
</div>
<ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span>10x more views</span>
</li>
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span>Top ads for 5 days</span>
</li>
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span>Moving up the list</span>
</li>
<li class="d-flex text-muted">
<i class="fi-x fs-xs mt-2 me-2"></i>
<span>Featured badge in the results</span>
</li>
</ul>
</div>
<div class="card-footer py-2 border-0">
<div class="border-top text-center pt-4 pb-3">
<a href="#" class="btn btn-primary rounded-pill">Choose plan</a>
</div>
</div>
</div>// Default pricing plan
.card
.card-body
img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
h2.h5.fw-normal.text-center.py-1.mb-0 Easy Start
.d-flex.align-items-end.justify-content-center.mb-4
.h1.mb-0 $5
.pb-2.ps-2 /month
ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span 3x more views
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span Top ads for 3 days
li.d-flex.text-muted
i.fi-x.fs-xs.mt-2.me-2
span Moving up the list
li.d-flex.text-muted
i.fi-x.fs-xs.mt-2.me-2
span Featured badge in the results
.card-footer.py-2.border-0
.border-top.text-center.pt-4.pb-3
a(href="#").btn.btn-outline-primary.rounded-pill
| Choose plan
// Popular pricing plan
.card.shadow
.card-body
img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
h2.h5.fw-normal.text-center.py-1.mb-0 Fast Sale
.d-flex.align-items-end.justify-content-center.mb-4
.h1.mb-0 $15
.pb-2.ps-2 /month
ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span 10x more views
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span Top ads for 5 days
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span Moving up the list
li.d-flex.text-muted
i.fi-x.fs-xs.mt-2.me-2
span Featured badge in the results
.card-footer.py-2.border-0
.border-top.text-center.pt-4.pb-3
a(href="#").btn.btn-primary.rounded-pill
| Choose plan
Light version
Easy Start
$5
/month
- 3x more views
- Top ads for 3 days
- Moving up the list
- Featured badge in the results
Fast Sale
$15
/month
- 10x more views
- Top ads for 5 days
- Moving up the list
- Featured badge in the results
<!-- Light default pricing plan -->
<div class="card card-light border-light">
<div class="card-body">
<img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
<h2 class="h5 fw-normal text-light text-center py-1 mb-0">Easy Start</h2>
<div class="d-flex align-items-end justify-content-center mb-4">
<div class="h1 text-light mb-0">$5</div>
<div class="text-light opacity-70 pb-2 ps-2">/month</div>
</div>
<ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span class="text-light">3x more views</span>
</li>
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span class="text-light">Top ads for 3 days</span>
</li>
<li class="d-flex text-light opacity-50">
<i class="fi-x fs-xs mt-2 me-2"></i>
<span>Moving up the list</span>
</li>
<li class="d-flex text-light opacity-50">
<i class="fi-x fs-xs mt-2 me-2"></i>
<span>Featured badge in the results</span>
</li>
</ul>
</div>
<div class="card-footer py-2 border-0">
<div class="border-top border-light text-center pt-4 pb-3">
<a href="#" class="btn btn-outline-light rounded-pill">Choose plan</a>
</div>
</div>
</div>
<!-- Light popular pricing plan -->
<div class="card card-light border-light card-active">
<div class="card-body">
<img src="path-to-image" class="d-block mx-auto mt-2 mb-4" width="72" alt="Icon">
<h2 class="h5 fw-normal text-light text-center py-1 mb-0">Fast Sale</h2>
<div class="d-flex align-items-end justify-content-center mb-4">
<div class="h1 text-light mb-0">$15</div>
<div class="text-light opacity-70 pb-2 ps-2">/month</div>
</div>
<ul class="list-unstyled d-block mb-0 mx-auto" style="max-width: 16rem;">
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span class="text-light">10x more views</span>
</li>
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span class="text-light">Top ads for 5 days</span>
</li>
<li class="d-flex">
<i class="fi-check text-primary fs-sm mt-1 me-2"></i>
<span class="text-light">Moving up the list</span>
</li>
<li class="d-flex text-light opacity-50">
<i class="fi-x fs-xs mt-2 me-2"></i>
<span>Featured badge in the results</span>
</li>
</ul>
</div>
<div class="card-footer py-2 border-0">
<div class="border-top border-light text-center pt-4 pb-3">
<a href="#" class="btn btn-primary rounded-pill">Choose plan</a>
</div>
</div>
</div>// Light default pricing plan
.card.card-light.border-light
.card-body
img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
h2.h5.fw-normal.text-light.text-center.py-1.mb-0 Easy Start
.d-flex.align-items-end.justify-content-center.mb-4
.h1.text-light.mb-0 $5
.text-light.opacity-70.pb-2.ps-2 /month
ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span.text-light 3x more views
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span.text-light Top ads for 3 days
li.d-flex.text-light.opacity-50
i.fi-x.fs-xs.mt-2.me-2
span Moving up the list
li.d-flex.text-light.opacity-50
i.fi-x.fs-xs.mt-2.me-2
span Featured badge in the results
.card-footer.py-2.border-0
.border-top.border-light.text-center.pt-4.pb-3
a(href="#").btn.btn-outline-light.rounded-pill
| Choose plan
// Light popular pricing plan
.card.card-light.border-light.card-active
.card-body
img(src="path-to-image", width="72", alt="Icon").d-block.mx-auto.mt-2.mb-4
h2.h5.fw-normal.text-light.text-center.py-1.mb-0 Fast Sale
.d-flex.align-items-end.justify-content-center.mb-4
.h1.text-light.mb-0 $15
.text-light.opacity-70.pb-2.ps-2 /month
ul.list-unstyled.d-block.mb-0.mx-auto(style="max-width: 16rem;")
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span.text-light 10x more views
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span.text-light Top ads for 5 days
li.d-flex
i.fi-check.text-primary.fs-sm.mt-1.me-2
span.text-light Moving up the list
li.d-flex.text-light.opacity-50
i.fi-x.fs-xs.mt-2.me-2
span Featured badge in the results
.card-footer.py-2.border-0
.border-top.border-light.text-center.pt-4.pb-3
a(href="#").btn.btn-primary.rounded-pill
| Choose plan