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
Image Description
Image Description 
<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>
Copy
<!-- 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>
Copy

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
Image Description
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 -->
Copy
<!-- 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>
Copy

Component #3

Pricing

Pick the best plan based on your ad spend

$500/mo
Maximum ad spend: $25000/mo
All features
Email support
Google ads
SSO via Google
API access
Facebook ads
Start free 14-day trial
SVG

Customized

Design a custom package for your business.

Available for businesses with large payments volume or unique business models.

Contact sales 
<!-- 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",
                       "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-navy 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-navy 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 -->
Copy
<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
<script src="../../assets/vendor/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>
Copy

Component #4

Pricing

Simple pricing model

UI Starter Kit

Sketch Adobe Xd
Sketch 63+ Adobe XD

Design Starter Kit

Sketch Adobe Xd
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 -->
Copy

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

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.

SVG

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

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

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
Contact us for custom plans 
<!-- 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 border 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="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 border 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="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+ pages</li>
              <li>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 border 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 -->
Copy

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.

Get Started

No credit card required.

SVG

Hundreds of components

Achieve maximum productivity with minimum effort with Front and create robust limitless products.

SVG

Images included

We made custom license for all our premium images in the Front.

SVG

Cancel anytime

If its not for you, just cancel, no hidden costs or fees.

SVG

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

Component #9

Simple, transparent pricing

Everything you need to continuously build, connect, and ship award-winning cross-browser websites.

Standard

Single site
Ideal for corporate, portfolio, blog, shop and many more.
Purchase for $59

Multisite

Unlimited sites
All the same examples as the Standard License, but you could build all of them with a single Multisite license.
Purchase for $149

Extended

For paying users
Best suited for "paid subscribers" and SaaS analytics applications.
Purchase for $599 
<!-- 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 -->
Copy

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