Pricing
Component #1
Find the right plan for your site
Monthly
Annual
Save up to 10%
Starter
$
32
/ mon
1 User
Front plan features
1 app
Integrations
Pro
$
54
/ mon
3 User
Front plan features
3 apps
Integrations
Product Support
Enterprise
$
79
/ mon
5 User
Front plan features
All apps
Integrations
Product Support
Prefer to start with the Trial version? Go here
<div class="overflow-hidden">
<!-- Hero Section -->
<div class="bg-img-hero" style="background-image: url(../assets/svg/components/abstract-shapes-12.svg);">
<div class="container space-top-3 space-bottom-2 space-bottom-lg-4">
<div class="w-md-80 w-lg-60 text-center mx-auto mb-9">
<h1>Find the right plan for your site</h1>
</div>
<!-- Toggle Switch -->
<div class="d-flex justify-content-center align-items-center mb-9 mb-lg-n10">
<span class="font-size-1 text-muted">Monthly</span>
<label class="toggle-switch mx-2" for="customSwitchExample2">
<input type="checkbox" class="js-toggle-switch toggle-switch-input" id="customSwitchExample2" checked
data-hs-toggle-switch-options='{
"targetSelector": "#pricingCount1Example2, #pricingCount2Example2, #pricingCount3Example2"
}'>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<div class="position-relative">
<span class="font-size-1 text-muted">Annual</span>
<!-- Arrow -->
<figure class="position-absolute top-0 text-nowrap mt-n5 ml-3 ml-md-5">
<svg class="d-block position-absolute mt-n2 ml-n4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"/>
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"/>
</svg>
<span class="badge badge-primary badge-pill py-sm-2 px-sm-3">Save up to 10%</span>
</figure>
<!-- End Arrow -->
</div>
</div>
<!-- End Toggle Switch -->
</div>
</div>
<!-- End Hero Section -->
<!-- Pricing Section -->
<div class="container mt-n10">
<div class="w-lg-80 mx-lg-auto position-relative">
<div class="row position-relative z-index-2 mx-n2 mb-5">
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<div class="card h-100">
<!-- Header -->
<div class="card-header text-center">
<span class="d-block h3">Starter</span>
<span class="d-block mb-2">
<span class="text-dark align-top">$</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount1Example2"
data-hs-toggle-switch-item-options='{
"min": 42,
"max": 32
}'>32</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
1 User
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Front plan features
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
1 app
</div>
</div>
<div class="media font-size-1 text-body">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Integrations
</div>
</div>
</div>
<!-- End Body -->
<div class="card-footer border-0">
<button type="button" class="btn btn-soft-primary btn-block transition-3d-hover">Get Started</button>
</div>
</div>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<div class="card bg-primary text-white h-100 shadow-primary-lg">
<!-- Header -->
<div class="card-header border-0 bg-primary text-white text-center">
<span class="d-block h3 text-white">Pro</span>
<span class="d-block mb-2">
<span class="text-white align-top">$</span>
<span class="font-size-4 text-white font-weight-bold mr-n2">
<span id="pricingCount2Example2"
data-hs-toggle-switch-item-options='{
"min": 64,
"max": 54
}'>54</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
</div>
<!-- End Header -->
<div class="border-top opacity-xs"></div>
<!-- Body -->
<div class="card-body">
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle mt-1 mr-2"></i>
<div class="media-body">
3 User
</div>
</div>
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle mt-1 mr-2"></i>
<div class="media-body">
Front plan features
</div>
</div>
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle mt-1 mr-2"></i>
<div class="media-body">
3 apps
</div>
</div>
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle mt-1 mr-2"></i>
<div class="media-body">
Integrations
</div>
</div>
<div class="media font-size-1">
<i class="fas fa-check-circle mt-1 mr-2"></i>
<div class="media-body">
Product Support
</div>
</div>
</div>
<!-- End Body -->
<div class="card-footer border-0 bg-primary text-white">
<button type="button" class="btn btn-light text-primary btn-block transition-3d-hover">Get Started</button>
</div>
</div>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3">
<!-- Pricing -->
<div class="card h-100">
<!-- Header -->
<div class="card-header text-center">
<span class="d-block h3">Enterprise</span>
<span class="d-block mb-2">
<span class="text-dark align-top">$</span>
<span class="font-size-4 text-dark font-weight-bold mr-n2">
<span id="pricingCount3Example2"
data-hs-toggle-switch-item-options='{
"min": 89,
"max": 79
}'>79</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
5 User
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Front plan features
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
All apps
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Integrations
</div>
</div>
<div class="media font-size-1 text-body">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Product Support
</div>
</div>
</div>
<!-- End Body -->
<div class="card-footer border-0">
<button type="button" class="btn btn-soft-primary btn-block transition-3d-hover">Get Started</button>
</div>
</div>
<!-- End Pricing -->
</div>
</div>
<!-- Info -->
<div class="position-relative z-index-2 text-center">
<div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
Prefer to start with the Trial version? <a class="d-block d-sm-inline-block font-weight-bold ml-sm-3" href="#">Go here <span class="fas fa-angle-right ml-1"></span></a>
</div>
</div>
<!-- End Info -->
<!-- SVG Elements -->
<figure class="max-w-11rem w-100 position-absolute top-0 right-0">
<div class="mt-n11 mr-n11">
<img class="img-fluid" src="../assets/svg/components/dots-1.svg" alt="Image Description">
</div>
</figure>
<figure class="max-w-13rem w-100 position-absolute bottom-0 left-0">
<div class="mb-3 ml-n9">
<img class="img-fluid" src="../assets/svg/components/abstract-shapes-10.svg" alt="Image Description">
</div>
</figure>
<!-- End SVG Elements -->
</div>
</div>
<!-- End Pricing Section -->
</div>
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF TOGGLE SWITCH
// =======================================================
$('.js-toggle-switch').each(function () {
var toggleSwitch = new HSToggleSwitch($(this)).init();
});
});
</script>
Component #2
Flexible and transparent pricing
Whatever your status, our offers evolve according to your needs.
Monthly
Annual
Save up to 10%
Starter
$
22
/ mon
1 User
Front plan features
1 app
Integrations
Pro
$
44
/ mon
3 User
Front plan features
3 apps
Integrations
Product Support
Enterprise
$
69
/ mon
5 User
Front plan features
All apps
Integrations
Product Support
<!-- Pricing Section -->
<div class="overflow-hidden">
<div class="container pb-4">
<!-- Title -->
<div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
<h2 class="h1">Flexible and transparent pricing</h2>
<p>Whatever your status, our offers evolve according to your needs.</p>
</div>
<!-- End Title -->
<!-- Toggle Switch -->
<div class="d-flex justify-content-center align-items-center mb-11">
<span class="font-size-1 text-muted">Monthly</span>
<label class="toggle-switch mx-2" for="customSwitchExample1">
<input type="checkbox" class="js-toggle-switch toggle-switch-input" id="customSwitchExample1"
data-hs-toggle-switch-options='{
"targetSelector": "#pricingCount1Example1, #pricingCount2Example1, #pricingCount3Example1"
}'>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
</label>
<div class="position-relative">
<span class="font-size-1 text-muted">Annual</span>
<!-- Arrow -->
<figure class="position-absolute top-0 text-nowrap mt-n5 ml-3 ml-md-7">
<svg class="d-block position-absolute mt-n2 ml-n4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"/>
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"/>
</svg>
<span class="badge badge-primary badge-pill py-sm-2 px-sm-3">Save up to 10%</span>
</figure>
<!-- End Arrow -->
</div>
</div>
<!-- End Toggle Switch -->
<div class="row mx-lg-5">
<div class="col-sm-6 col-lg-4 px-lg-5 mb-5">
<!-- Pricing -->
<div class="card shadow-none h-100">
<!-- Header -->
<div class="card-header border-0 text-center">
<span class="d-block h3 mb-0">Starter</span>
<span class="d-block">
<span class="font-size-4 text-primary font-weight-bold">
<span class="mr-n2">$</span>
<span id="pricingCount1Example1"
data-hs-toggle-switch-item-options='{
"min": 22,
"max": 12
}'>22</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
1 User
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Front plan features
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
1 app
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Integrations
</div>
</div>
</div>
<!-- End Body -->
<div class="card-footer border-0">
<button type="button" class="btn btn-soft-primary btn-block transition-3d-hover">Get Started</button>
</div>
</div>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-lg-4 px-lg-5 mb-5">
<!-- Pricing -->
<div class="position-relative">
<div class="card shadow-lg h-100">
<!-- Header -->
<div class="card-header border-0 text-center">
<span class="d-block h3 mb-0">Pro</span>
<span class="d-block">
<span class="font-size-4 text-primary font-weight-bold">
<span class="mr-n2">$</span>
<span id="pricingCount2Example1"
data-hs-toggle-switch-item-options='{
"min": 44,
"max": 34
}'>44</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
3 User
</div>
</div>
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Front plan features
</div>
</div>
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
3 apps
</div>
</div>
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Integrations
</div>
</div>
<div class="media font-size-1 mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Product Support
</div>
</div>
</div>
<!-- End Body -->
<div class="card-footer border-0">
<button type="button" class="btn btn-soft-primary btn-block transition-3d-hover">Get Started</button>
</div>
</div>
<!-- SVG Elements -->
<figure class="max-w-19rem w-100 position-absolute bottom-0 left-0 z-index-n1">
<div class="mb-n7 ml-n7">
<img class="img-fluid" src="../assets/svg/components/dots-2.svg" alt="Image Description">
</div>
</figure>
<figure class="max-w-15rem w-100 position-absolute top-0 right-0 z-index-n1">
<div class="mt-n7 mr-n7">
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 260 260" xml:space="preserve">
<circle fill="#ffc107" cx="130" cy="130" r="130"/>
</svg>
</div>
</figure>
<!-- End SVG Elements -->
</div>
<!-- End Pricing -->
</div>
<div class="col-sm-6 col-lg-4 px-lg-5 mb-5">
<!-- Pricing -->
<div class="card shadow-none h-100">
<!-- Header -->
<div class="card-header border-0 text-center">
<span class="d-block h3 mb-0">Enterprise</span>
<span class="d-block">
<span class="font-size-4 text-primary font-weight-bold">
<span class="mr-n2">$</span>
<span id="pricingCount3Example1"
data-hs-toggle-switch-item-options='{
"min": 69,
"max": 59
}'>69</span>
</span>
<span class="font-size-1">/ mon</span>
</span>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
5 User
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Front plan features
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
All apps
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Integrations
</div>
</div>
<div class="media font-size-1 text-body mb-3">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Product Support
</div>
</div>
</div>
<!-- End Body -->
<div class="card-footer border-0">
<button type="button" class="btn btn-soft-primary btn-block transition-3d-hover">Get Started</button>
</div>
</div>
<!-- End Pricing -->
</div>
</div>
</div>
</div>
<!-- End Pricing Section -->
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF TOGGLE SWITCH
// =======================================================
$('.js-toggle-switch').each(function () {
var toggleSwitch = new HSToggleSwitch($(this)).init();
});
});
</script>
Component #3
Pricing
Pick the best plan based on your ad spend
$/mo
Maximum ad spend:
$25000/mo
All features
Email support
Google ads
SSO via Google
API access
Facebook ads
Customized
Design a custom package for your business.
Available for businesses with large payments volume or unique business models.
<!-- Pricing Title Section -->
<div class="bg-light">
<div class="container space-2">
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="d-block small font-weight-bold text-cap mb-2">Pricing</span>
<h2 class="h1">Pick the best plan based on your ad spend</h2>
</div>
<!-- Pricing -->
<div class="row align-items-lg-center no-gutters">
<div class="col-lg-6 mb-3 mb-lg-0">
<!-- Card -->
<div class="card text-center z-index-2">
<div class="card-body p-7">
<!-- Group Toggle Switch -->
<div class="btn-group btn-group-sm btn-group-toggle btn-group-segment btn-group-pills my-5" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="options" id="option1" class="js-switch-text" checked
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 500
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 50000
}],
"startUpdateOnChange": true
}'> Monthly
</label>
<label class="btn">
<input type="radio" name="options" id="option2" class="js-switch-text"
data-hs-switch-text-options='{
"target": [{
"selector": "#rangeSliderResult",
"text": 475
}, {
"selector": "#rangeSliderSecondaryResult",
"text": 25000
}],
"startUpdateOnChange": true
}'> Yearly
<!-- Arrow -->
<span class="position-absolute top-0 text-nowrap mt-n5 ml-3 ml-md-7">
<svg class="d-block position-absolute mt-n2 ml-n4" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 99.3 57" width="48">
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M2,39.5l7.7,14.8c0.4,0.7,1.3,0.9,2,0.4L27.9,42"/>
<path fill="none" stroke="#bdc5d1" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M11,54.3c0,0,10.3-65.2,86.3-50"/>
</svg>
<span class="badge badge-primary badge-pill py-sm-2 px-sm-3">Save up to 10%</span>
</span>
<!-- End Arrow -->
</label>
</div>
<!-- End Group Toggle Switch -->
<!-- Range Slider -->
<div class="display-4 font-size-md-down-4 text-dark">
$<span id="rangeSliderResult"></span>/mo
</div>
<div class="d-flex justify-content-center mb-5">
Maximum ad spend:
<span class="text-primary ml-1">$25000/mo</span>
</div>
<!-- End Range Slider -->
<div class="mb-5">
<input class="js-ion-range-slider" type="text"
data-hs-ion-range-slider-options='{
"extra_classes": "range-slider-custom",
"type": "single",
"min": 250,
"max": 750,
"step": 25,
"from": 500,
"secondary_val": {
"steps": [250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700, 725, 750],
"values": [25000, 27000, 30000, 32000, 35000, 37000, 40000, 42000, 45000, 47000, 50000, 52000, 55000, 57000, 60000, 62000, 65000, 67000, 70000, 72000, 75000]
},
"prefix": "$",
"secondary_target_el": "#rangeSliderSecondaryResult",
"result_min_target_el": "#rangeSliderResult"
}'>
</div>
<!-- List -->
<div class="row">
<div class="col-sm-6">
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
All features
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Email support
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Google ads
</div>
</div>
</div>
<div class="col-sm-6">
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
SSO via Google
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
API access
</div>
</div>
<div class="media text-left text-body mb-2">
<i class="fas fa-check-circle text-success mt-1 mr-2"></i>
<div class="media-body">
Facebook ads
</div>
</div>
</div>
</div>
<!-- End List -->
</div>
<div class="card-footer px-7">
<a class="font-weight-bold" href="#">Start free 14-day trial <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-lg-6">
<!-- Card -->
<div class="card bg-dark text-center ml-lg-n2">
<div class="card-body p-7">
<figure class="max-w-10rem mx-auto mb-4">
<img class="img-fluid" src="../assets/svg/icons/icon-white-4.svg" alt="SVG">
</figure>
<h2 class="text-white">Customized</h2>
<p class="text-white">Design a custom package for your business.</p>
<p class="text-white-70">Available for businesses with large payments volume or unique business models.</p>
</div>
<hr class="opacity-xs my-0">
<div class="card-footer border-0 bg-dark px-7">
<a class="text-white font-weight-bold" href="#">Contact sales <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Pricing -->
</div>
</div>
<!-- End Pricing Title Section -->
<link rel="stylesheet" href="./node_modules/ion-rangeslider/css/ion.rangeSlider.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
<script src="./node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- JS Front -->
<script src="./assets/js/hs.ion-range-slider.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF ION RANGE SLIDER
// =======================================================
var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($('.js-ion-range-slider'), {
cusOnChange: function () {
var $checked = $('.js-switch-text:checked'),
defData = JSON.parse($checked.attr('data-hs-switch-text-options'));
defData.target[0].text = $('#rangeSliderResult').text();
defData.target[1].text = $('#rangeSliderSecondaryResult').text();
$checked.attr('data-hs-switch-text-options', JSON.stringify(defData));
}
});
// INITIALIZATION OF SWITCH
// =======================================================
$('.js-switch-text').each(function () {
var switchText = new HSSwitchText($(this), {
afterChange: function () {
ionRangeSlider.data('ionRangeSlider').update({
from: $(this)[0].target[0].text
});
}
}).init();
});
});
</script>
Component #4
Pricing
Simple pricing model
UI Starter Kit
Sketch 63+
Adobe XD
Design Starter Kit
Sketch 63+
Adobe XD
<!-- Pricing Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
<span class="d-block small font-weight-bold text-cap mb-2">Pricing</span>
<h2>Simple pricing model</h2>
</div>
<!-- End Title -->
<div class="w-lg-75 mx-lg-auto">
<!-- Pricing -->
<div class="card p-4 mb-3">
<div class="row align-items-sm-center">
<div class="col-lg-3 mb-3 mb-lg-0">
<h4 class="mb-0">UI Starter Kit</h4>
</div>
<div class="col-6 col-sm text-lg-center mb-3 mb-sm-0">
<img class="img-fluid mr-2" src="../assets/svg/illustrations/sketch.svg" alt="Sketch" width="24">
<img class="img-fluid" src="../assets/svg/illustrations/adobe-xd.svg" alt="Adobe Xd" width="24">
</div>
<div class="col-6 col-sm mb-3 mb-sm-0">
<span class="d-block font-size-1">Sketch 63+</span>
<span class="d-block font-size-1">Adobe XD</span>
</div>
<div class="col-sm col-lg-3 text-sm-right">
<button type="submit" class="btn btn-sm btn-outline-primary btn-wide transition-3d-hover">Free Download</button>
</div>
</div>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="card p-4">
<div class="row align-items-sm-center">
<div class="col-lg-3 mb-3 mb-lg-0">
<h4 class="mb-0">Design Starter Kit</h4>
</div>
<div class="col-6 col-sm text-lg-center mb-3 mb-sm-0">
<img class="img-fluid mr-2" src="../assets/svg/illustrations/sketch.svg" alt="Sketch" width="24">
<img class="img-fluid" src="../assets/svg/illustrations/adobe-xd.svg" alt="Adobe Xd" width="24">
</div>
<div class="col-6 col-sm mb-3 mb-sm-0">
<span class="d-block font-size-1">Sketch 63+</span>
<span class="d-block font-size-1">Adobe XD</span>
</div>
<div class="col-sm col-lg-3 text-sm-right">
<button type="submit" class="btn btn-sm btn-outline-primary btn-wide transition-3d-hover">Purchase for $49</button>
</div>
</div>
</div>
<!-- End Pricing -->
</div>
</div>
<!-- End Pricing Section -->
Component #5
Always know what you'll pay.
Once you're setup, instantly withdraw payments or deposit into your bank account within 2-3 business days.
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.
Grow your business with Front Pay
From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. See our customers
<!-- Pricing Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
<h2>Always know what you'll pay.</h2>
<p>Once you're setup, instantly withdraw payments or deposit into your bank account within 2-3 business days.</p>
</div>
<!-- End Title -->
<!-- Pricing -->
<div class="row no-gutters align-items-lg-center mb-7 mb-md-11">
<div class="col-lg-7 shadow-lg rounded-lg">
<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">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 class="max-w-8rem mx-auto mb-2">
<img class="img-fluid" src="../assets/svg/illustrations/account-creation.svg" alt="SVG">
</figure>
<h4>Account creation</h4>
<!-- End Icon Block -->
</div>
<div class="col-sm-1 my-3 my-sm-0">
<span class="font-size-3 text-primary">+</span>
</div>
<div class="col-sm-5">
<!-- Icon Block -->
<figure class="max-w-8rem mx-auto mb-2">
<img class="img-fluid" src="../assets/svg/illustrations/pro-account.svg" alt="SVG">
</figure>
<h4>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 -->
<div class="media mb-4">
<span class="icon icon-xs icon-soft-light icon-circle mt-1 mr-3">
<i class="fas fa-angle-right fa-xs"></i>
</span>
<div class="media-body">
<h4 class="text-white mb-1">135+ currencies</h4>
<p class="text-white-70 mb-0">Process charges and display prices in your customer's.</p>
</div>
</div>
<div class="border-top opacity-xs mb-4"></div>
<div class="media mb-4">
<span class="icon icon-xs icon-soft-light icon-circle mt-1 mr-3">
<i class="fas fa-angle-right fa-xs"></i>
</span>
<div class="media-body">
<h4 class="text-white mb-1">Global support</h4>
<p class="text-white-70 mb-0">Businesses in 25+ countries can accept payments.</p>
</div>
</div>
<div class="border-top opacity-xs mb-4"></div>
<div class="media">
<span class="icon icon-xs icon-soft-light icon-circle mt-1 mr-3">
<i class="fas fa-angle-right fa-xs"></i>
</span>
<div class="media-body">
<h4 class="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>
</div>
<!-- End Info -->
</div>
</div>
</div>
<!-- End Pricing -->
<!-- CTA -->
<div class="w-lg-75 mx-lg-auto">
<div class="media d-block d-sm-flex">
<figure class="w-100 max-w-15rem mr-4 mb-3 mb-sm-0">
<img class="img-fluid" src="../assets/svg/illustrations/growing-business.svg" alt="SVG">
</figure>
<div class="media-body">
<h4>Grow your business with Front Pay</h4>
<p>From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies.
<a class="font-weight-bold" href="#">See our customers <i class="fas fa-angle-right ml-1"></i></a>
</p>
</div>
</div>
</div>
<!-- End CTA -->
</div>
<!-- End Pricing Section -->
Component #6
Choose a plan that's right for you.
Everything you need. From front to back.
| 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">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Choose a plan that's right for you.</h2>
<p>Everything you need. From front to back.</p>
</div>
<!-- End Title -->
<!-- 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">
<span class="text-dark">Starter</span>
<small class="d-block text-body">$0/mon</small>
</th>
<th scope="col" class="w-20 border-left border-right">
<span class="text-dark">Growth</span>
<span class="badge badge-warning badge-pill ml-1">Hot</span>
<small class="d-block text-body">$60/mon</small>
</th>
<th scope="col" class="w-20">
<span class="text-dark">Scale</span>
<small class="d-block text-body">Custom</small>
</th>
</tr>
</thead>
<tbody>
<tr class="border-top border-bottom">
<th scope="row" class="bg-white text-dark 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 py-3 px-4">14-days free trial</th>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
<td class="text-center border-left border-right p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 py-3 px-4">No user limit</th>
<td class="text-center text-body p-3"></td>
<td class="text-center border-left border-right p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 py-3 px-4">Long-term support</th>
<td class="text-center text-body py-3 px-4"></td>
<td class="text-center text-body border-left border-right py-3 px-4"></td>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 py-3 px-4">Email support</th>
<td class="text-center text-body p-3">
<span class="badge badge-soft-primary badge-pill font-weight-normal py-2 px-3">Add-on available</span>
</td>
<td class="text-center text-body border-left border-right py-3 px-4"></td>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
</tr>
<tr>
<th scope="row" class="bg-white text-dark 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 py-3 px-4">Removal of Front branding</th>
<td class="text-center text-body p-3"></td>
<td class="text-center border-left border-right p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 py-3 px-4">Active maintenance & support</th>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
<td class="text-center border-left border-right p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</td>
</tr>
<tr>
<th scope="row" class="font-size-1 py-3 px-4">Data storage for 365 days</th>
<td class="text-center text-body p-3"></td>
<td class="text-center text-body border-left border-right p-3">
<span class="badge badge-soft-primary badge-pill font-weight-normal py-2 px-3">Add-on available</span>
</td>
<td class="text-center p-3">
<i class="fas fa-check-circle text-success mr-2"></i>
</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-sm btn-soft-indigo text-nowrap 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-sm btn-soft-indigo text-nowrap transition-3d-hover">Choose Plan</button>
</td>
<td class="bg-white text-center p-3">
<button type="button" class="btn btn-sm btn-primary text-nowrap transition-3d-hover">Contact Us</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table -->
</div>
<!-- End Pricing Section -->
Component #7
Scalable plans
All kinds of plans that scale with your user growth
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 space-2">
<!-- Title -->
<div class="w-lg-65 text-center mx-auto mb-5 mb-sm-9">
<h2 class="h1">Scalable plans</h2>
<p>All kinds of plans that scale with your user growth</p>
</div>
<!-- End Title -->
<div class="w-lg-75 mx-lg-auto">
<div class="row align-items-sm-end mx-n2 mb-5 mb-md-7">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Pricing -->
<div class="card card-bordered shadow-none text-center">
<div class="card-body border-0">
<figure class="text-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="60" height="60" viewBox="0 0 160 160">
<circle fill="#377dff" opacity=".85" cx="80" cy="80" r="48"/>
</svg>
</figure>
<h4>Starter</h4>
<span class="text-dark font-size-2 font-weight-bold">Free</span>
</div>
<div class="card-body pt-0 pb-5 px-5">
<ul class="list-unstyled list-sm-article mb-4">
<li>Community support</li>
<li>400+ pages</li>
</ul>
<button type="button" class="btn btn-sm btn-block btn-soft-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 card-bordered shadow-none text-center">
<div class="card-body border-0">
<figure class="text-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="60" height="60" viewBox="0 0 160 160">
<circle fill="#377dff" opacity=".85" cx="48" cy="80" r="48"/>
<circle fill="#377dff" opacity=".85" cx="112" cy="80" r="48"/>
</svg>
</figure>
<h4>Individual</h4>
<span class="text-dark font-size-2 font-weight-bold">$59</span>
</div>
<div class="card-body pt-0 pb-5 px-5">
<ul class="list-unstyled list-sm-article mb-4">
<li>Community support</li>
<li>400+ card-pageeds</li>
<li>100+ body 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 card-bordered shadow-none text-center">
<div class="card-header border-0">
<figure class="text-center mb-2">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="60" height="60" viewBox="0 0 160 160">
<circle fill="#377dff" opacity=".85" cx="48" cy="53" r="48"/>
<circle fill="#377dff" opacity=".85" cx="112" cy="53" r="48"/>
<circle fill="#377dff" opacity=".85" cx="81" cy="107" r="48"/>
</svg>
</figure>
<h4>Enterprise</h4>
<span class="text-dark font-size-2 font-weight-bold">$599</span>
</div>
<div class="card-body pt-0 pb-5 px-5">
<ul class="list-unstyled list-sm-article mb-4">
<li>Community support</li>
<li>400+ pages</li>
<li>100+ header variations</li>
<li>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="#">
Contact us for
<span class="btn btn-xs btn-icon btn-soft-primary rounded-circle mx-2">
<i class="fas fa-angle-right"></i>
</span>
custom plans
</a>
</div>
<!-- End Link -->
</div>
</div>
<!-- End Pricing Section -->
Component #8
Pricing
No additional costs. Pay for what you use.
$59
/ mo
Start your Front business now. 100% guaranteed money back. No questions asked.
No credit card required.
Hundreds of components
Achieve maximum productivity with minimum effort with Front and create robust limitless products.
Images included
We made custom license for all our premium images in the Front.
Cancel anytime
If its not for you, just cancel, no hidden costs or fees.
Money back
100% guaranteed money back. No questions asked.
<!-- Pricing Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2 class="h1">Pricing</h2>
<p>No additional costs. Pay for what you use.</p>
</div>
<!-- End Title -->
<div class="row align-items-lg-center">
<div id="stickyBlockStartPoint" class="col-lg-5 mb-9 mb-lg-0">
<!-- Pricing -->
<div class="card z-index-2 p-4 p-md-7">
<span class="text-dark">
<span class="display-4">$59</span>
<span class="font-size-2">/ mo</span>
</span>
<hr class="my-4">
<div class="mb-5">
<p>Start your Front business now. 100% guaranteed money back. No questions asked.</p>
</div>
<div class="mb-2">
<a class="btn btn-primary btn-pill btn-wide transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
Get Started <i class="fas fa-angle-right fa-sm ml-1"></i>
</a>
</div>
<p class="small">No credit card required.</p>
</div>
<!-- End Pricing -->
</div>
<div class="col-lg-7">
<div class="pl-lg-6">
<div class="row">
<div class="col-sm-6 mb-3">
<!-- Icon Blocks -->
<figure class="w-100 max-w-6rem mb-3">
<img class="img-fluid" src="../assets/svg/icons/icon-29.svg" alt="SVG">
</figure>
<h4>Hundreds of components</h4>
<p>Achieve maximum productivity with minimum effort with Front and create robust limitless products.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 mb-3">
<!-- Icon Blocks -->
<figure class="w-100 max-w-6rem mb-3">
<img class="img-fluid" src="../assets/svg/icons/icon-30.svg" alt="SVG">
</figure>
<h4>Images included</h4>
<p>We made custom license for all our premium images in the Front.</p>
<!-- End Icon Blocks -->
</div>
</div>
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<figure class="w-100 max-w-6rem mb-3">
<img class="img-fluid" src="../assets/svg/icons/icon-32.svg" alt="SVG">
</figure>
<h4>Cancel anytime</h4>
<p>If its not for you, just cancel, no hidden costs or fees.</p>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6">
<!-- Icon Blocks -->
<figure class="w-100 max-w-6rem mb-3">
<img class="img-fluid" src="../assets/svg/icons/icon-31.svg" alt="SVG">
</figure>
<h4>Money back</h4>
<p>100% guaranteed money back. No questions asked.</p>
<!-- End Icon Blocks -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Pricing Section -->
Component #9
Simple, transparent pricing
Everything you need to continuously build, connect, and ship award-winning cross-browser websites.
Multisite
Unlimited sites
All the same examples as the Standard License, but you could build all of them with a single Multisite license.
Extended
For paying users
Best suited for "paid subscribers" and SaaS analytics applications.
<!-- Pricing Section -->
<div class="container space-2">
<!-- Title -->
<div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<h2>Simple, transparent pricing</h2>
<p>Everything you need to continuously build, connect, and ship award-winning cross-browser websites.</p>
</div>
<!-- End Title -->
<div class="w-xl-80 mx-xl-auto">
<!-- Pricing -->
<div class="card p-4 mb-3 mb-md-1">
<div class="row align-items-sm-center">
<div class="col">
<div class="media align-items-center">
<div class="min-w-8rem mr-2">
<figure class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 160 160">
<circle fill="#377dff" opacity=".85" cx="80" cy="80" r="48"/>
</svg>
</figure>
</div>
<div class="media-body">
<h4 class="mb-0">Standard</h4>
<small class="d-block">Single site</small>
</div>
</div>
</div>
<div class="col-sm-7 col-md-5">
<span class="font-size-1">Ideal for corporate, portfolio, blog, shop and many more.</span>
</div>
<div class="col-12 col-md col-lg-4 col-xl-3 text-lg-right mt-3 mt-lg-0">
<a class="btn btn-block btn-outline-primary border transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Purchase for $59</a>
</div>
</div>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="card p-4 mb-3 mb-md-1">
<div class="row align-items-sm-center">
<div class="col">
<div class="media align-items-center">
<div class="min-w-8rem mr-2">
<figure class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="32" height="32" viewBox="0 0 160 160">
<circle fill="#377dff" opacity=".85" cx="48" cy="53" r="48"/>
<circle fill="#377dff" opacity=".85" cx="112" cy="53" r="48"/>
<circle fill="#377dff" opacity=".85" cx="81" cy="107" r="48"/>
</svg>
</figure>
</div>
<div class="media-body">
<h4 class="mb-0">Multisite</h4>
<small class="d-block">Unlimited sites</small>
</div>
</div>
</div>
<div class="col-sm-7 col-md-5">
<span class="font-size-1">All the same examples as the Standard License, but you could build all of them with a single Multisite license.</span>
</div>
<div class="col-12 col-md col-lg-4 col-xl-3 text-lg-right mt-3 mt-lg-0">
<a class="btn btn-block btn-outline-primary border transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Purchase for $149</a>
</div>
</div>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="card p-4 mb-3 mb-md-1">
<div class="row align-items-sm-center">
<div class="col">
<div class="media align-items-center">
<div class="min-w-8rem mr-2">
<figure class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="56" height="56" viewBox="0 0 160 160">
<circle fill="#377dff" opacity=".85" cx="80" cy="80" r="48"/>
</svg>
</figure>
</div>
<div class="media-body">
<h4 class="mb-0">Extended</h4>
<small class="d-block">For paying users</small>
</div>
</div>
</div>
<div class="col-sm-7 col-md-5">
<span class="font-size-1">Best suited for "paid subscribers" and SaaS analytics applications.</span>
</div>
<div class="col-12 col-md col-lg-4 col-xl-3 text-lg-right mt-3 mt-lg-0">
<a class="btn btn-block btn-outline-primary border transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Purchase for $599</a>
</div>
</div>
</div>
<!-- End Pricing -->
</div>
</div>
<!-- End Pricing Section -->
Component #10
Pricing plans
Need 100TB+ storage? Contact us for custom pricing
<!-- Pricing Section -->
<div class="container space-2">
<h4 class="mb-3">Pricing plans</h4>
<!-- Pricing -->
<div class="custom-control custom-radio custom-control-inline checkbox-outline checkbox-icon w-100">
<input type="radio" id="pricingRadio1" name="pricingRadio1" class="custom-control-input checkbox-outline-input checkbox-icon-input" checked>
<label class="checkbox-outline-label checkbox-icon-label w-100 rounded-lg p-4" for="pricingRadio1">
<span class="row">
<span class="col-sm-3 order-sm-2 text-sm-right mb-3 mb-sm-0">
<span class="d-block mb-2">
<span class="text-primary font-weight-bold align-top">$</span>
<span class="font-size-3 text-primary font-weight-bold">25</span>
<span class="font-size-1">/ mo</span>
</span>
</span>
<span class="col-sm-9 order-sm-1">
<span class="d-block h3 mb-1">Launch</span>
<span class="d-block">99GB storage in launch accounts</span>
</span>
</span>
</label>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="custom-control custom-radio custom-control-inline checkbox-outline checkbox-icon w-100">
<input type="radio" id="pricingRadio2" name="pricingRadio1" class="custom-control-input checkbox-outline-input checkbox-icon-input">
<label class="checkbox-outline-label checkbox-icon-label w-100 rounded-lg p-4" for="pricingRadio2">
<span class="row">
<span class="col-sm-3 order-sm-2 text-sm-right mb-3 mb-sm-0">
<span class="d-block mb-2">
<span class="text-primary font-weight-bold align-top">$</span>
<span class="font-size-3 text-primary font-weight-bold">44</span>
<span class="font-size-1">/ mo</span>
</span>
</span>
<span class="col-sm-9 order-sm-1">
<span class="d-block h3 mb-1">Growth</span>
<span class="d-block">500GB storage in growth accounts</span>
</span>
</span>
</label>
</div>
<!-- End Pricing -->
<!-- Pricing -->
<div class="custom-control custom-radio custom-control-inline checkbox-outline checkbox-icon w-100">
<input type="radio" id="pricingRadio3" name="pricingRadio1" class="custom-control-input checkbox-outline-input checkbox-icon-input">
<label class="checkbox-outline-label checkbox-icon-label w-100 rounded-lg p-4" for="pricingRadio3">
<span class="row">
<span class="col-sm-3 order-sm-2 text-sm-right mb-3 mb-sm-0">
<span class="d-block mb-2">
<span class="text-primary font-weight-bold align-top">$</span>
<span class="font-size-3 text-primary font-weight-bold">99</span>
<span class="font-size-1">/ mo</span>
</span>
</span>
<span class="col-sm-9 order-sm-1">
<span class="d-block h3 mb-1">Enterprise</span>
<span class="d-block">100TB storage in enterprise accounts</span>
</span>
</span>
</label>
</div>
<!-- End Pricing -->
<div class="text-center mt-5">
<div class="mb-5">
<p class="font-size-1">Need 100TB+ storage? <a class="font-weight-bold" href="#">Contact us for custom pricing</a></p>
</div>
<button type="button" class="btn btn-primary btn-wide transition-3d-hover">Submit</button>
</div>
</div>
<!-- End Pricing Section -->