Pricing - Static

Set the price of your business with modern design pricing blocks.

Static #1

14-Day free trial

$0 month
Image Description

Enterprise

$44 month
Image Description
                  
                    <!-- 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

SVG

Account creation

+
SVG

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

Sketch Adobe Xd

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

Need 100TB+ storage? Contact us for custom 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">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

Image Description

Starter

Free
  • Community support
  • 400+ pages
Image Description

Individual

$59
  • Community support
  • 400+ pages
  • 100+ header variations
Image Description

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