Pricing - Static
Set the price of your business with modern design pricing blocks.
Static #1
14-Day free trial
$0
month
Enterprise
$44
month
<!-- Pricing Section -->
<div class="container">
<div class="w-lg-65 mx-lg-auto">
<div class="card-deck d-block d-md-flex card-md-gutters-3 mb-5">
<!-- Pricing -->
<div class="card text-center mb-5 mb-md-0">
<!-- Header -->
<header class="card-header p-5">
<h4 class="h5 text-success">14-Day free trial</h4>
<div>
<span class="h1 text-dark font-weight-medium">
<span class="align-top font-size-2">$</span>0
</span>
<span class="text-secondary">month</span>
</div>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body p-5">
<!-- SVG Icon -->
<figure id="SVGfreeTrial" class="svg-preloader w-80 mx-auto mb-5">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/free-trial.svg" alt="Image Description"
data-parent="#SVGfreeTrial">
</figure>
<!-- End SVG Icon -->
<button type="button" class="btn btn-sm btn-block btn-success transition-3d-hover">Start 14-Day Free Trial</button>
</div>
<!-- End Content -->
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="card card-frame-highlighted text-center">
<!-- Header -->
<header class="card-header p-5">
<h4 class="h5 text-primary">Enterprise</h4>
<div>
<span class="h1 text-dark font-weight-medium">
<span class="align-top font-size-2">$</span>44
</span>
<span class="text-secondary">month</span>
</div>
</header>
<!-- End Header -->
<!-- Content -->
<div class="card-body p-5">
<!-- SVG Icon -->
<figure id="SVGenterprise" class="svg-preloader w-80 mx-auto mb-5">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/enterprise-1.svg" alt="Image Description"
data-parent="#SVGenterprise">
</figure>
<!-- End SVG Icon -->
<button type="button" class="btn btn-sm btn-block btn-primary transition-3d-hover">Start Enterprise</button>
</div>
<!-- End Content -->
</div>
<!-- End Pricing -->
</div>
</div>
</div>
<!-- End Pricing Section -->
Static #2
1.5%
+0.5 USD
per successful transaction
Account creation
+
Professional account
Included for 3 months,
then $2.5/monthly included VAT
-
135+ currencies
Process charges and display prices in your customer's.
-
Global support
Businesses in 25+ countries can accept payments.
-
Secure payment info collection
Use our libraries to collect payment information without sensitive data.
<!-- Pricing Section -->
<div class="container space-2">
<!-- Pricing -->
<div class="row no-gutters align-items-lg-center">
<div class="col-lg-7 shadow-lg rounded">
<div class="text-center py-11 px-5 px-sm-9">
<header class="mb-9">
<div class="mb-1">
<span class="display-4 text-primary font-weight-medium">1.5%</span>
<span class="badge badge-indigo badge-pill align-top ml-1">+0.5 USD</span>
</div>
<p>per successful transaction</p>
</header>
<div class="row justify-content-sm-center align-items-sm-center mb-5">
<div class="col-sm-5">
<!-- Icon Block -->
<figure id="iconAccount" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-2">
<img class="js-svg-injector" src="../../assets/svg/illustrations/account-creation.svg" alt="SVG"
data-parent="#iconAccount">
</figure>
<h4 class="h6">Account creation</h4>
<!-- End Icon Block -->
</div>
<div class="col-sm-1 my-3 my-sm-0">
<span class="font-size-3 text-primary font-weight-medium">+</span>
</div>
<div class="col-sm-5">
<!-- Icon Block -->
<figure id="iconProAccount" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-2">
<img class="js-svg-injector" src="../../assets/svg/illustrations/pro-account.svg" alt="SVG"
data-parent="#iconProAccount">
</figure>
<h4 class="h6">Professional account</h4>
<!-- End Icon Block -->
</div>
</div>
<div class="mb-7">
<p class="small">Included for 3 months,<br>then $2.5/monthly included VAT</p>
</div>
<button type="button" class="btn btn-primary btn-wide btn-pill transition-3d-hover">Get Started</button>
</div>
</div>
<div class="col-lg-5 bg-primary">
<div class="py-9 px-5 px-sm-9">
<!-- Info -->
<ul class="list-unstyled">
<li class="media pb-3">
<span class="btn btn-icon btn-xs btn-soft-white rounded-circle mt-1 mr-3">
<span class="fas fa-angle-right btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-white mb-1">135+ currencies</h4>
<p class="text-white-70">Process charges and display prices in your customer's.</p>
</div>
</li>
<li class="border-top opacity-md py-3"></li>
<li class="media">
<span class="btn btn-icon btn-xs btn-soft-white rounded-circle mt-1 mr-3">
<span class="fas fa-angle-right btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-white mb-1">Global support</h4>
<p class="text-white-70">Businesses in 25+ countries can accept payments.</p>
</div>
</li>
<li class="border-top opacity-md py-3"></li>
<li class="media">
<span class="btn btn-icon btn-xs btn-soft-white rounded-circle mt-1 mr-3">
<span class="fas fa-angle-right btn-icon__inner"></span>
</span>
<div class="media-body">
<h4 class="h6 text-white mb-1">Secure payment info collection</h4>
<p class="text-white-70 mb-0">Use our libraries to collect payment information without sensitive data.</p>
</div>
</li>
</ul>
<!-- End Info -->
</div>
</div>
</div>
<!-- End Pricing -->
</div>
<!-- End Pricing Section -->
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
</script>
Static #3
| Starter $0/mon | Growth Hot $60/mon | Scale Custom | |
|---|---|---|---|
| Cross-platform UI toolkit | |||
| 14-days free trial | |||
| No user limit | |||
| Long-term support | |||
| Email support | Add-on available | ||
| Developer tools | |||
| Removal of Front branding | |||
| Active maintenance & support | |||
| Data storage for 365 days | Add-on available | ||
<!-- Pricing Section -->
<div class="container space-2 space-lg-3">
<!-- Table -->
<div class="table-responsive-lg w-lg-75 mx-lg-auto">
<table class="table table-striped table-borderless">
<thead class="text-center">
<tr>
<th scope="col" class="w-40"></th>
<th scope="col" class="w-20">
Starter
<small class="d-block text-secondary">$0/mon</small>
</th>
<th scope="col" class="w-20 border-left border-right">
Growth
<span class="badge badge-warning font-weight-medium badge-pill ml-1">Hot</span>
<small class="d-block text-secondary">$60/mon</small>
</th>
<th scope="col" class="w-20">
Scale
<small class="d-block text-secondary">Custom</small>
</th>
</tr>
</thead>
<tbody>
<tr class="border-top border-bottom">
<th scope="row" class="h6 bg-white pt-5 pb-3 px-4 mb-0">Cross-platform UI toolkit</th>
<td class="bg-white"></td>
<td class="bg-white border-left border-right"></td>
<td class="bg-white"></td>
</tr>
<tr>
<th scope="row" class="font-size-1 font-weight-normal py-3 px-4">14-days free trial</th>
<td class="text-center text-success p-3">
<small class="fas fa-check"></small>
</td>
<td class="text-center text-success border-left border-right p-3">
<small class="fas fa-check"></small>
</td>
<td class="text-success text-center p-3">
<small class="fas fa-check"></small>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 font-weight-normal py-3 px-4">No user limit</th>
<td class="text-center text-secondary p-3"></td>
<td class="text-center text-success border-left border-right p-3">
<small class="fas fa-check"></small>
</td>
<td class="text-success text-center p-3">
<small class="fas fa-check"></small>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Long-term support</th>
<td class="text-center text-secondary py-3 px-4"></td>
<td class="text-center text-secondary border-left border-right py-3 px-4"></td>
<td class="text-success text-center p-3">
<small class="fas fa-check"></small>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Email support</th>
<td class="text-center text-secondary p-3">
<span class="btn btn-xs btn-soft-primary btn-pill font-weight-medium text-uppercase py-1 px-2">Add-on available</span>
</td>
<td class="text-center text-secondary border-left border-right py-3 px-4"></td>
<td class="text-success text-center p-3">
<small class="fas fa-check"></small>
</td>
</tr>
<tr>
<th scope="row" class="h6 bg-white pt-5 pb-3 px-4 mb-0">Developer tools</th>
<td class="bg-white"></td>
<td class="bg-white border-left border-right"></td>
<td class="bg-white"></td>
</tr>
<tr>
<th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Removal of Front branding</th>
<td class="text-center text-secondary p-3"></td>
<td class="text-center text-success border-left border-right p-3">
<small class="fas fa-check"></small>
</td>
<td class="text-success text-center p-3">
<small class="fas fa-check"></small>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Active maintenance & support</th>
<td class="text-center text-success p-3">
<small class="fas fa-check"></small>
</td>
<td class="text-center text-success border-left border-right p-3">
<small class="fas fa-check"></small>
</td>
<td class="text-success text-center p-3">
<small class="fas fa-check"></small>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 font-weight-normal py-3 px-4">Data storage for 365 days</th>
<td class="text-center text-secondary p-3"></td>
<td class="text-center text-secondary border-left border-right p-3">
<span class="btn btn-xs btn-soft-primary btn-pill font-weight-medium text-uppercase py-1 px-2">Add-on available</span>
</td>
<td class="text-success text-center p-3">
<small class="fas fa-check"></small>
</td>
</tr>
<tr>
<th scope="row" class="bg-white p-3"></th>
<td class="bg-white text-center p-3">
<button type="button" class="btn btn-xs btn-soft-indigo transition-3d-hover">Choose Plan</button>
</td>
<td class="bg-white text-center border-left border-right p-3">
<button type="button" class="btn btn-xs btn-soft-indigo transition-3d-hover">Choose Plan</button>
</td>
<td class="bg-white text-center p-3">
<button type="button" class="btn btn-xs btn-primary transition-3d-hover">Contact Us</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Pricing Section -->
Static #4
Compatible with Sketch and Adobe XD
$
39
.00
UI Starter Kit
-
50+ UI Elements
-
Styles
-
Typography
-
Icons
$
79
.00
-20% off
Design Starter Kit
-
250+ UI Elements
-
3 Categories
-
Design System
-
Illustration Kit
-
Skeleton Kit
Not ready to purchase? Grab a free sample
<!-- Pricing Section -->
<div class="container space-2">
<div class="w-lg-85 mx-lg-auto">
<div class="media align-items-center max-width-35 mx-auto mb-9">
<div class="mr-3">
<img class="img-fluid mr-2" src="../../assets/svg/components/sketch.svg" alt="Sketch" width="32">
<img class="img-fluid" src="../../assets/svg/components/adobe-xd.svg" alt="Adobe Xd" width="32">
</div>
<div class="media-body">
<p class="small mb-0">Compatible with Sketch and Adobe XD</p>
</div>
</div>
<div class="card-group card-group-sm-break mb-5">
<!-- Pricing -->
<div class="card">
<div class="card-header text-center p-7">
<div class="mb-2">
<span class="align-top">$</span>
<span class="display-4 font-weight-semi-bold">39</span>
<span>.00</span>
</div>
<h3 class="font-weight-semi-bold mb-0">UI Starter Kit</h3>
</div>
<div class="card-body p-7">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
50+ UI Elements
</div>
</li>
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
Styles
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
Typography
</div>
</li>
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
Icons
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 px-7 pb-7">
<a class="btn btn-block btn-soft-primary transition-3d-hover" href="#">Buy Now</a>
</div>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="card">
<div class="card-header text-center p-7">
<div class="d-inline-block position-relative mb-2">
<span class="align-top">$</span>
<span class="display-4 font-weight-semi-bold">79</span>
<span>.00</span>
<span class="badge badge-success badge-pill badge-pos shadow-sm">-20% off</span>
</div>
<h3 class="font-weight-semi-bold mb-0">Design Starter Kit</h3>
</div>
<div class="card-body p-7">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
250+ UI Elements
</div>
</li>
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
3 Categories
</div>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
Design System
</div>
</li>
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
Illustration Kit
</div>
</li>
<li class="media mb-2">
<small class=" mr-3">
<small class="fas fa-check"></small>
</small>
<div class="media-body font-size-1">
Skeleton Kit
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="card-footer border-0 pt-0 px-7 pb-7">
<a class="btn btn-block btn-primary transition-3d-hover" href="#">Buy Now</a>
</div>
</div>
<!-- End Pricing -->
</div>
<div class="text-center">
<p class="font-size-1">Not ready to purchase? <a href="#">Grab a free sample</a></p>
</div>
</div>
</div>
<!-- End Pricing Section -->
Static #5
<!-- Pricing -->
<div class="custom-control custom-radio custom-control-inline checkbox-outline w-100">
<input type="radio" id="pricingRadio1" name="pricingRadio1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label card w-100 p-4" for="pricingRadio1">
<span class="row">
<span class="col-9">
<span class="h6 mb-1">Free</span>
<span class="mb-0">99GB storage in free accounts</p>
</span>
<span class="col-3 text-right">
<span class="h2 text-primary font-weight-semi-bold text-lh-sm mb-0">Free</span>
<span class="d-block text-secondary font-size-1">monthly</span>
</span>
</span>
</label>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="custom-control custom-radio custom-control-inline checkbox-outline w-100">
<input type="radio" id="pricingRadio1" name="pricingRadio1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label card w-100 p-4" for="pricingRadio1">
<span class="row">
<span class="col-9">
<span class="h6 mb-1">Individual</span>
<span class="mb-0">500GB storage in individual accounts</span>
</span>
<span class="col-3 text-right">
<span class="h2 text-primary font-weight-semi-bold text-lh-sm mb-0">$44</span>
<span class="d-block text-secondary font-size-1">monthly</span>
</span>
</span>
</label>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="custom-control custom-radio custom-control-inline checkbox-outline w-100">
<input type="radio" id="pricingRadio2" name="pricingRadio1" class="custom-control-input checkbox-outline__input">
<label class="checkbox-outline__label card w-100 p-4" for="pricingRadio2">
<span class="row">
<span class="col-9">
<span class="h6 mb-1">Enterprise</span>
<span class="mb-0">100TB storage in enterprise accounts</span>
</span>
<span class="col-3 text-right">
<span class="h2 text-primary font-weight-semi-bold text-lh-sm mb-0">$99</span>
<span class="d-block text-secondary font-size-1">monthly</span>
</span>
</span>
</label>
</div>
<!-- End Pricing -->
<div class="text-center">
<div class="mb-5">
<p class="font-size-1">Need 100TB+ storage? <a href="#">Contact us for custom pricing</a></p>
</div>
<button type="button" class="btn btn-primary btn-wide transition-3d-hover">Submit</button>
</div>
Static #6
Starter
Free- Community support
- 400+ pages
Individual
$59- Community support
- 400+ pages
- 100+ header variations
Enterprise
$599- Community support
- 400+ pages
- 100+ header variations
- 20+ home page options
<!-- Pricing Section -->
<div class="container">
<div class="w-lg-75 mx-lg-auto">
<div class="row align-items-sm-end mx-n2 mb-7">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Pricing -->
<div class="card text-center shadow">
<div class="card-header border-0 pt-5 px-5">
<img class="mb-2" src="../../assets/svg/components/one-dot.svg" alt="Image Description" width="60px">
<h4 class="h6 mb-3">Starter</h4>
<span class="font-size-2 font-weight-semi-bold">Free</span>
</div>
<div class="card-body pt-0 pb-5 px-5">
<ul class="list-group list-group-flush list-group-borderless text-secondary mb-4">
<li class="list-group-item">Community support</li>
<li class="list-group-item">400+ pages</li>
</ul>
<button type="button" class="btn btn-sm btn-block btn-outline-primary transition-3d-hover">Create Account</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Pricing -->
<div class="card text-center shadow">
<div class="card-header border-0 pt-5 px-5">
<img class="mb-2" src="../../assets/svg/components/two-dots.svg" alt="Image Description" width="60px">
<h4 class="h6 mb-3">Individual</h4>
<span class="font-size-2 font-weight-semi-bold">$59</span>
</div>
<div class="card-body pt-0 pb-5 px-5">
<ul class="list-group list-group-flush list-group-borderless text-secondary mb-4">
<li class="list-group-item">Community support</li>
<li class="list-group-item">400+ pages</li>
<li class="list-group-item">100+ header variations</li>
</ul>
<button type="button" class="btn btn-sm btn-block btn-primary transition-3d-hover">Try Free for 14 days</button>
</div>
</div>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-md-4 px-2">
<!-- Pricing -->
<div class="card text-center shadow">
<div class="card-header border-0 pt-5 px-5">
<img class="mb-2" src="../../assets/svg/components/three-dots.svg" alt="Image Description" width="60px">
<h4 class="h6 mb-3">Enterprise</h4>
<span class="font-size-2 font-weight-semi-bold">$599</span>
</div>
<div class="card-body pt-0 pb-5 px-5">
<ul class="list-group list-group-flush list-group-borderless text-secondary mb-4">
<li class="list-group-item">Community support</li>
<li class="list-group-item">400+ pages</li>
<li class="list-group-item">100+ header variations</li>
<li class="list-group-item">20+ home page options</li>
</ul>
<button type="button" class="btn btn-sm btn-block btn-primary transition-3d-hover">Try Free for 14 days</button>
</div>
</div>
<!-- End Pricing -->
</div>
</div>
<!-- Link -->
<div class="text-center">
<a href="../pages/careers.html">
<span class="text-secondary">Contact us for</span>
<span class="btn btn-icon btn-sm btn-soft-primary rounded-circle mx-2">
<span class="fas fa-angle-right btn-icon__inner"></span>
</span>
<span class="text-secondary">custom plans</span>
</a>
</div>
<!-- End Link -->
</div>
</div>
<!-- End Pricing Section -->