# Pricing

## Component #1

- Preview
- HTML
- JS

## Flexible and transparent pricing

Whatever your status, our offers evolve according to your needs.

Monthly Annually
Save up to 10%
$ 19 /mo

### Professional

All the basics for starting a new business

- 1 user
- Front plan features
- 1 app

No card required

$ 39 /mo

### Team

Everything you need for a growing business

- 3 users
- Front plan features
- 3 apps
- Product support

No card required

$ 59 /mo

### Enterprise

Advanced features for scaling your business

- Unlimited users
- Front plan features
- Unlimited apps
- Product support

No card required

                    <!-- Pricing -->
                    <div class="overflow-hidden">
                      <div class="container">
                        <!-- Heading -->
                        <div class="w-md-75 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 Heading -->

                        <!-- Form Switch -->
                        <div class="d-flex justify-content-center mb-5">
                          <div class="form-check form-switch form-switch-between">
                            <label class="form-check-label">Monthly</label>
                            <input class="js-toggle-switch form-check-input" type="checkbox"
                                   data-hs-toggle-switch-options='{
                                     "targetSelector": "#pricingCount1, #pricingCount2, #pricingCount3"
                                   }'>
                            <label class="form-check-label form-switch-promotion">
                              Annually
                              <span class="form-switch-promotion-container">
                                <span class="form-switch-promotion-body">
                                  <svg class="form-switch-promotion-arrow" 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>
                                    <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"></path>
                                  </svg>
                                  <span class="form-switch-promotion-text">
                                    <span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
                                  </span>
                                </span>
                              </span>
                            </label>
                          </div>
                        </div>
                        <!-- End Form Switch -->

                        <div class="row mb-7">
                          <div class="col-md mb-3 mb-md-0">
                            <!-- Card -->
                            <div class="card h-100 shadow-none zi-1">
                              <div class="card-header text-center">
                                <div class="mb-2">
                                  <span class="fs-5 align-top text-dark fw-semi-bold">$</span>
                                  <span class="fs-1 text-dark fw-semi-bold">19</span>
                                  <span>/mo</span>
                                </div>

                                <h3 class="card-title">Professional</h3>
                                <p class="card-text">All the basics for starting a new business</p>
                              </div>

                              <div class="card-body d-flex justify-content-center py-0">
                                <!-- List Checked -->
                                <ul class="list-checked list-checked-primary">
                                  <li class="list-checked-item">1 user</li>
                                  <li class="list-checked-item">Front plan features</li>
                                  <li class="list-checked-item">1 app</li>
                                </ul>
                                <!-- End List Checked -->
                              </div>

                              <div class="card-footer text-center">
                                <div class="d-grid mb-2">
                                  <button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
                                </div>
                                <p class="card-text text-muted small">No card required</p>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="col-md mb-3 mb-md-0">
                            <div class="position-relative">
                              <!-- Card -->
                              <div class="card h-100 zi-1">
                                <div class="card-header text-center">
                                  <div class="mb-2">
                                    <span class="fs-5 align-top text-dark fw-semi-bold">$</span>
                                    <span id="pricingCount2" class="fs-1 text-dark fw-semi-bold"
                                           data-hs-toggle-switch-item-options='{
                                             "min": 49,
                                             "max": 39
                                           }'>39</span>
                                    <span>/mo</span>
                                  </div>

                                  <h3 class="card-title">Team</h3>
                                  <p class="card-text">Everything you need for a growing business</p>
                                </div>

                                <div class="card-body d-flex justify-content-center py-0">
                                  <!-- List Checked -->
                                  <ul class="list-checked list-checked-primary">
                                    <li class="list-checked-item">3 users</li>
                                    <li class="list-checked-item">Front plan features</li>
                                    <li class="list-checked-item">3 apps</li>
                                    <li class="list-checked-item">Product support</li>
                                  </ul>
                                  <!-- End List Checked -->
                                </div>

                                <div class="card-footer text-center">
                                  <div class="d-grid mb-2">
                                    <button type="button" class="btn btn-primary">Try free for 30 days</button>
                                  </div>
                                  <p class="card-text text-muted small">No card required</p>
                                </div>
                              </div>
                              <!-- End Card -->

                              <!-- SVG Elements -->
                              <figure class="position-absolute bottom-0 start-0 mb-n7 ms-n7" style="width: 9rem;">
                                <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                              </figure>

                              <figure class="position-absolute top-0 end-0 mt-n7 me-n7" style="width: 7rem;">
                                <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>
                              </figure>
                              <!-- End SVG Elements -->
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-md mb-3 mb-md-0">
                            <!-- Card -->
                            <div class="card h-100 shadow-none zi-1">
                              <div class="card-header text-center">
                                <div class="mb-2">
                                  <span class="fs-5 align-top text-dark fw-semi-bold">$</span>
                                  <span id="pricingCount3" class="fs-1 text-dark fw-semi-bold"
                                         data-hs-toggle-switch-item-options='{
                                           "min": 69,
                                           "max": 59
                                         }'>59</span>
                                  <span>/mo</span>
                                </div>

                                <h3 class="card-title">Enterprise</h3>
                                <p class="card-text">Advanced features for scaling your business</p>
                              </div>

                              <div class="card-body d-flex justify-content-center py-0">
                                <!-- List Checked -->
                                <ul class="list-checked list-checked-primary">
                                  <li class="list-checked-item">Unlimited users</li>
                                  <li class="list-checked-item">Front plan features</li>
                                  <li class="list-checked-item">Unlimited apps</li>
                                  <li class="list-checked-item">Product support</li>
                                </ul>
                                <!-- End List Checked -->
                              </div>

                              <div class="card-footer text-center">
                                <div class="d-grid mb-2">
                                  <button type="button" class="btn btn-ghost-primary">Try free for 30 days</button>
                                </div>
                                <p class="card-text text-muted small">No card required</p>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                    </div>
                    <!-- End Pricing -->

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-toggle-switch/dist/hs-toggle-switch.min.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF TOGGLE SWITCH
                        // =======================================================
                        new HSToggleSwitch('.js-toggle-switch')
                      })()
                    </script>

## Component #2

- Preview
- HTML
- CSS
- JS

Pricing

## Pick the best plan based on your ad spend

Monthly Annually
Save up to 10%
$/mo
Maximum ad spend: $50000/mo

- All features
- Email support
- Google ads

- SSO via Google
- API access
- Facebook ads

Start free 14-day trial

## Customized

Design a custom package for your business.

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

Contact sales

                    <!-- Pricing -->
                    <div class="bg-light overflow-hidden">
                      <div class="container content-space-2 content-space-lg-3">
                        <!-- Heading -->
                        <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                          <span class="text-cap">Pricing</span>
                          <h2 class="h1">Pick the best plan based on your ad spend</h2>
                        </div>
                        <!-- End Heading -->

                        <div class="position-relative">
                          <div class="row gx-0 align-items-md-center">
                            <div class="col-md-6 mb-3 mb-md-0">
                              <!-- Card -->
                              <div class="card card-lg zi-2" data-aos="fade-up">
                                <div class="card-body">
                                  <form>
                                    <!-- Radio Button Group -->
                                    <div class="text-center mb-5">
                                      <div class="btn-group btn-group-segment btn-group-pills" role="group" aria-label="Pricing radio button group">
                                        <input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
                                               data-hs-switch-text-options='{
                                                 "target": [{
                                                   "selector": "#rangeSliderResult",
                                                   "text": 500
                                                 }, {
                                                   "selector": "#rangeSliderSecondaryResult",
                                                   "text": 50000
                                                 }],
                                                 "startUpdateOnChange": true
                                               }'>
                                        <label class="js-toggle-switch btn btn-sm" for="btnradio1">
                                          Monthly
                                        </label>

                                        <input type="radio" class="js-switch-text btn-check" name="btnradio" id="btnradio2" autocomplete="off"
                                               data-hs-switch-text-options='{
                                                 "target": [{
                                                   "selector": "#rangeSliderResult",
                                                   "text": 475
                                                 }, {
                                                   "selector": "#rangeSliderSecondaryResult",
                                                   "text": 25000
                                                 }],
                                                 "startUpdateOnChange": true
                                               }'>
                                        <label class="js-toggle-switch btn btn-sm" for="btnradio2">
                                          <span class="form-switch-promotion">
                                            Annually

                                            <!-- Form Switch Promotion -->
                                            <span class="form-switch-promotion-container">
                                              <span class="form-switch-promotion-body">
                                                <svg class="form-switch-promotion-arrow" 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>
                                                  <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"></path>
                                                </svg>
                                                <span class="form-switch-promotion-text">
                                                  <span class="badge bg-primary rounded-pill ms-1">Save up to 10%</span>
                                                </span>
                                              </span>
                                            </span>
                                            <!-- End Form Switch Promotion -->
                                          </span>
                                        </label>
                                      </div>
                                    </div>
                                    <!-- End Radio Button Group -->

                                    <!-- Range Slider -->
                                    <div class="display-4 text-dark text-center">
                                      $<span id="rangeSliderResult"></span>/mo
                                    </div>
                                    <div class="d-flex justify-content-center mb-5">
                                      Maximum ad spend:
                                      <span class="text-primary ms-1">$<span id="rangeSliderSecondaryResult">50000</span>/mo</span>
                                    </div>
                                    <!-- End Range Slider -->
                                  </form>

                                  <div class="text-center mb-5">
                                    <div class="range-slider">
                                      <div class="js-nouislider"
                                           data-hs-nouislider-options='{
                                             "range": {
                                               "min": 250,
                                               "max": 720
                                             },
                                             "connect": [true, false],
                                             "start": 500,
                                             "result_min_target_el": "#rangeSliderResult"
                                           }'>
                                    </div>
                                  </div>
                                  </div>

                                  <div class="row">
                                    <div class="col-sm-6">
                                      <!-- List Checked -->
                                      <ul class="list-checked list-checked-primary mb-0">
                                        <li class="list-checked-item">All features</li>
                                        <li class="list-checked-item">Email support</li>
                                        <li class="list-checked-item">Google ads</li>
                                      </ul>
                                      <!-- End List Checked -->
                                    </div>
                                    <!-- End Col -->

                                    <div class="col-sm-6">
                                      <!-- List Checked -->
                                      <ul class="list-checked list-checked-primary mb-0">
                                        <li class="list-checked-item">SSO via Google</li>
                                        <li class="list-checked-item">API access</li>
                                        <li class="list-checked-item">Facebook ads</li>
                                      </ul>
                                      <!-- End List Checked -->
                                    </div>
                                    <!-- End Col -->
                                  </div>
                                  <!-- End Row -->
                                </div>

                                <a class="card-footer card-link bg-light text-center" href="#">Start free 14-day trial <i class="bi-chevron-right small ms-1"></i></a>
                              </div>
                              <!-- End Card -->
                            </div>
                            <!-- End Col -->

                            <div class="col-md-6">
                              <!-- Card -->
                              <div class="card card-lg bg-dark text-center ms-md-n2" data-aos="fade-up" data-aos-delay="200">
                                <div class="card-body">
                                  <span class="svg-icon text-white mb-3">

                                  </span>

                                  <h2 class="card-title text-white">Customized</h2>
                                  <p class="card-text text-white">Design a custom package for your business.</p>
                                  <p class="card-text text-white-70">Available for businesses with large payments volume or unique business models.</p>
                                </div>

                                <a class="card-footer card-link text-white" href="#">Contact sales <i class="bi-chevron-right small ms-1"></i></a>
                              </div>
                              <!-- End Card -->
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->

                          <!-- SVG Shape -->
                          <div class="position-absolute bottom-0 start-0 d-none d-lg-block" style="width: 10rem; margin-left: -10rem;">
                            <img class="img-fluid" src="../assets/svg/illustrations/oc-peeking.svg" alt="SVG">
                          </div>
                          <!-- End SVG Shape -->
                        </div>
                      </div>
                    </div>
                    <!-- End Pricing -->

                    <link rel="stylesheet" href="../node_modules/nouislider/dist/nouislider.min.css">

                    <!-- JS Implementing Plugins -->
                    <script src="../assets/vendor/hs-switch/dist/hs-switch-text.min.js"></script>
                    <script src="../node_modules/nouislider/dist/nouislider.min.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.nouislider.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF SWITCH TEXT
                        // =======================================================
                        new HSSwitchText('.js-switch-text', {
                          afterChange() {
                            document.querySelector('.js-nouislider').noUiSlider.set([this.target[0].text])
                          }
                        })

                        // INITIALIZATION OF NOUISLIDER
                        // =======================================================
                        HSCore.components.HSNoUISlider.init(document.querySelector('.js-nouislider'))
                        const slider = HSCore.components.HSNoUISlider.getItem(0)

                        slider.on('change', function (val) {
                          const input = document.querySelector('.js-switch-text:checked'),
                            defData = JSON.parse(input.getAttribute('data-hs-switch-text-options'))

                          defData.target[0].text = val[0]
                          input.setAttribute('data-hs-switch-text-options', JSON.stringify(defData))
                        })
                      })()
                    </script>

## Component #3

- Preview
- HTML

## Always know what you'll pay.

Once you're setup, instantly withdraw payments or deposit into your bank account within 2-3 business days.

1.5% +0.5 USD

per successful transaction

#### Account creation

+

#### Professional account

Included for 3 months,
then $2.5/monthly included VAT

- #### 135+ currencies

  Process charges and display prices in your customer's.

- #### Global support

  Businesses in 25+ countries can accept payments.

- #### Secure payment info collection

  Use our libraries to collect payment information without sensitive data.

- #### Over 10 million customers

  We’re on average 8x cheaper than leading world high street banks.

#### 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 -->
                    <div class="container content-space-2 content-space-lg-3">
                      <!-- Heading -->
                      <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 Heading -->

                      <div class="row gx-0 align-items-lg-center mb-7 mb-md-10">
                        <div class="col-lg-7">
                          <!-- Card -->
                          <div class="card card-lg text-center zi-2" data-aos="fade-up">
                            <div class="card-header pb-0">
                              <div class="mb-1">
                                <span class="display-4 text-primary">1.5%</span>
                                <span class="badge bg-dark rounded-pill align-top ms-1">+0.5 USD</span>
                              </div>
                              <p>per successful transaction</p>
                            </div>

                            <div class="card-body">
                              <div class="row justify-content-sm-center align-items-sm-center mb-5">
                                <div class="col-sm-5">
                                  <div class="mb-2">
                                    <img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/account-creation.svg" alt="SVG">
                                  </div>

                                  <h4>Account creation</h4>
                                </div>
                                <!-- End Col -->

                                <div class="col-sm-1 my-3 my-sm-0">
                                  <span class="fs-3 text-primary">+</span>
                                </div>
                                <!-- End Col -->

                                <div class="col-sm-5">
                                  <div class="mb-2">
                                    <img class="avatar avatr-xl avatar-4x3" src="../assets/svg/illustrations/pro-account.svg" alt="SVG">
                                  </div>

                                  <h4>Professional account</h4>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->

                              <div class="mb-7">
                                <p class="card-text small">Included for 3 months,<br>then $2.5/monthly included VAT</p>
                              </div>

                              <button type="button" class="btn btn-primary btn-transition px-6">Get started</button>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-lg-5">
                          <!-- Card -->
                          <div class="card card-lg bg-dark ms-md-n2" data-aos="fade-up" data-aos-delay="200">
                            <div class="card-body">
                              <!-- List Checked -->
                              <ul class="list-pointer list-pointer-soft-bg-light list-pointer-lg">
                                <li class="list-pointer-item">
                                  <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>
                                </li>

                                <li class="list-pointer-item">
                                  <h4 class="text-white mb-1">Global support</h4>
                                  <p class="text-white-70 mb-0">Businesses in 25+ countries can accept payments.</p>
                                </li>

                                <li class="list-pointer-item">
                                  <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>
                                </li>

                                <li class="list-pointer-item">
                                  <h4 class="text-white mb-1">Over 10 million customers</h4>
                                  <p class="text-white-70 mb-0">We’re on average 8x cheaper than leading world high street banks.</p>
                                </li>
                              </ul>
                              <!-- End List Checked -->
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <!-- CTA -->
                      <div class="w-lg-75 mx-lg-auto">
                        <div class="d-block d-sm-flex align-items-sm-center">
                          <div class="flex-shrink-0 mb-3 mb-sm-0">
                            <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/illustrations/growing-business.svg" alt="SVG">
                          </div>

                          <div class="flex-grow-1 ms-4">
                            <h4>Grow your business with Front Pay</h4>
                            <p class="mb-0">From startups to Fortune 500s, explore how millions of businesses use Front Pay to start and scale their companies. <a class="link" href="#">See our customers <i class="bi-chevron-right small"></i></a></p>
                          </div>
                        </div>
                      </div>
                      <!-- End CTA -->
                    </div>
                    <!-- End Pricing -->

## Component #4

- Preview
- HTML

## Choose a plan that's right for you.

Everything you need. From front to back.

| Professional $0/mon | Team Hot $60/mon | Enterprise 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 -->
                    <div class="container content-space-2 content-space-lg-3">
                      <!-- Heading -->
                      <div class="w-md-75 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 Heading -->

                      <!-- Table -->
                      <div class="table-responsive-lg w-lg-75 mx-lg-auto">
                        <table class="table table-lg table-striped table-borderless table-nowrap table-vertical-border-striped">
                          <thead class="table-text-center">
                            <tr>
                              <th scope="col" style="width: 40%;"></th>

                              <th scope="col" style="width: 20%;">
                                <span class="d-block">Professional</span>
                                <span class="d-block text-muted small">$0/mon</span>
                              </th>

                              <th scope="col" style="width: 20%;">
                                <span class="d-block">Team <span class="badge bg-warning text-dark rounded-pill ms-1">Hot</span></span>
                                <span class="d-block text-muted small">$60/mon</span>
                              </th>

                              <th scope="col" style="width: 20%;">
                                <span class="d-block">Enterprise</span>
                                <span class="d-block text-muted small">Custom</span>
                              </th>
                            </tr>
                          </thead>

                          <tbody>
                            <tr>
                              <th scope="row" class="text-dark">Cross-platform UI toolkit</th>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">14-days free trial</th>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">No user limit</th>
                              <td></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">Long-term support</th>
                              <td></td>
                              <td></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">Email support</th>
                              <td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
                              <td></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">Developer tools</th>
                              <td></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">Removal of Front branding</th>
                              <td></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">Active maintenance & support</th>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark">Data storage for 365 days</th>
                              <td></td>
                              <td><span class="badge bg-soft-primary text-primary rounded-pill">Add-on available</span></td>
                              <td class="table-text-center"><i class="bi-check-circle text-success me-2"></i></td>
                            </tr>

                            <tr>
                              <th scope="row" class="text-dark"></th>
                              <td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
                              <td><button type="button" class="btn btn-soft-dark btn-sm btn-transition">Choose plan</button></td>
                              <td><button type="button" class="btn btn-primary btn-sm btn-transition">Contact us</button></td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!-- End Table -->
                    </div>
                    <!-- End Pricing -->

## Component #5

- Preview
- HTML

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

Need custom plan? Contact us

                    <!-- Pricing -->
                    <div class="container">
                      <!-- Heading -->
                      <div class="w-lg-75 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 Heading -->

                      <div class="w-lg-75 mx-lg-auto">
                        <div class="row align-items-sm-end gx-3 mb-5 mb-md-7">
                          <div class="col-sm-6 col-md-4 mb-3 mb-md-0">
                            <!-- Card -->
                            <div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="100">
                              <div class="card-header text-center pb-0">
                                <span class="svg-icon svg-icon-sm text-primary mb-3">

                                </span>

                                <h4 class="card-title">Starter</h4>
                                <h3 class="card-title">Free</h3>
                              </div>

                              <div class="card-body">
                                <ul class="list-checked list-checked-primary">
                                  <li class="list-checked-item">Community support</li>
                                  <li class="list-checked-item">400+ pages</li>
                                </ul>
                              </div>

                              <div class="card-footer pt-0">
                                <div class="d-grid">
                                  <button type="button" class="btn btn-primary btn-sm btn-transition">Create account</button>
                                </div>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-6 col-md-4 mb-3 mb-md-0">
                            <!-- Card -->
                            <div class="card card-bordered shadow-none" data-aos="fade-up" data-aos-delay="50">
                              <div class="card-header text-center pb-0">
                                <span class="svg-icon text-primary mb-3">

                                </span>

                                <h4 class="card-title">Individual</h4>
                                <h3 class="card-title">$59</h3>
                              </div>

                              <div class="card-body">
                                <ul class="list-checked list-checked-primary">
                                  <li class="list-checked-item">Community support</li>
                                  <li class="list-checked-item">400+ pages</li>
                                  <li class="list-checked-item">100+ header variations</li>
                                </ul>
                              </div>

                              <div class="card-footer pt-0">
                                <div class="d-grid">
                                  <button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
                                </div>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->

                          <div class="col-sm-6 col-md-4">
                            <!-- Card -->
                            <div class="card card-bordered shadow-none" data-aos="fade-up">
                              <div class="card-header text-center pb-0">
                                <span class="svg-icon text-primary mb-3">

                                </span>

                                <h4 class="card-title">Enterprise</h4>
                                <h3 class="card-title">$599</h3>
                              </div>

                              <div class="card-body">
                                <ul class="list-checked list-checked-primary">
                                  <li class="list-checked-item">Community support</li>
                                  <li class="list-checked-item">400+ pages</li>
                                  <li class="list-checked-item">100+ header variations</li>
                                  <li class="list-checked-item">20+ home page options</li>
                                </ul>
                              </div>

                              <div class="card-footer pt-0">
                                <div class="d-grid">
                                  <button type="button" class="btn btn-primary btn-sm btn-transition">Try free for 14-days</button>
                                </div>
                              </div>
                            </div>
                            <!-- End Card -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <!-- Card Info -->
                        <div class="text-center" data-aos="fade-up">
                          <div class="card card-info-link card-sm">
                            <div class="card-body">
                              Need custom plan? <a class="card-link ms-2" href="#">Contact us <span class="bi-chevron-right small ms-1"></span></a>
                            </div>
                          </div>
                        </div>
                        <!-- End Card Info -->
                      </div>
                    </div>
                    <!-- End Pricing -->

## Component #6

- Preview
- HTML

## Pricing

No additional costs. Pay for what you use.

Monthly Annually
Coming soon
$ 19 /mo

Start your Front business now. 100% guaranteed money back. No questions asked.

Get started

#### Hundreds of components

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

#### Images included

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

#### Cancel anytime

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

#### Money back

100% guaranteed money back. No questions asked.

                    <!-- Pricing -->
                    <div class="container content-space-2 content-space-lg-3">
                      <!-- Heading -->
                      <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 Heading -->

                      <div class="row align-items-lg-center">
                        <div class="col-sm-6 col-lg-5 mb-9 mb-sm-0">
                          <!-- Pricing -->
                          <div class="card zi-2" data-aos="fade-up">
                            <div class="card-body">
                              <!-- Radio Button Group -->
                              <div class="text-center mb-5">
                                <div class="btn-group btn-group-segment" role="group" aria-label="Pricing radio button group">
                                  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
                                  <label class="btn btn-sm" for="btnradio1">Monthly</label>

                                  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
                                  <label class="btn btn-sm disabled" for="btnradio2">
                                    <span class="form-switch-promotion">Annually

                                      <!-- Form Switch Promotion -->
                                      <span class="form-switch-promotion-container">
                                        <span class="form-switch-promotion-body">
                                          <svg class="form-switch-promotion-arrow" 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>
                                            <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"></path>
                                          </svg>
                                          <span class="form-switch-promotion-text">
                                            <span class="badge bg-primary rounded-pill ms-1">Coming soon</span>
                                          </span>
                                        </span>
                                      </span>
                                      <!-- End Form Switch Promotion -->
                                    </span>
                                  </label>
                                </div>
                              </div>
                              <!-- End Radio Button Group -->

                              <!-- Media -->
                              <div class="d-flex align-items-end">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-money-profits.svg" alt="Image Description">
                                </div>

                                <div class="flex-grow-1 ms-3">
                                  <span class="text-dark">
                                    <span class="fs-5 align-top text-dark fw-semi-bold">$</span>
                                    <span class="display-3 text-dark fw-semi-bold">19</span>
                                    <span>/mo</span>
                                  </span>
                                </div>
                              </div>
                              <!-- End Media -->

                              <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="d-grid">
                                <a class="btn btn-primary btn-transition" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">Get started</a>
                              </div>
                            </div>
                          </div>
                          <!-- End Pricing -->
                        </div>
                        <!-- End Col -->

                        <div class="col-sm-6 col-lg-7">
                          <div class="ps-sm-6">
                            <div class="row">
                              <div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="100">
                                <span class="svg-icon text-primary mb-3">

                                </span>

                                <h4>Hundreds of components</h4>
                                <p>Achieve maximum productivity with minimum effort with Front and create robust limitless products.</p>
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-12 col-lg-6 mb-3" data-aos="fade-up" data-aos-delay="150">
                                <span class="svg-icon text-primary mb-3">

                                </span>

                                <h4>Images included</h4>
                                <p>We made custom license for all our premium images in the Front.</p>
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-12 col-lg-6 mb-3 mb-sm-0" data-aos="fade-up" data-aos-delay="200">
                                <span class="svg-icon text-primary mb-3">

                                </span>

                                <h4>Cancel anytime</h4>
                                <p>If its not for you, just cancel, no hidden costs or fees.</p>
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-12 col-lg-6" data-aos="fade-up" data-aos-delay="250">
                                <span class="svg-icon text-primary mb-3">

                                </span>

                                <h4>Money back</h4>
                                <p>100% guaranteed money back. No questions asked.</p>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->
                          </div>
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Pricing -->

## Component #7

- Preview
- HTML

Pricing

## Simple pricing model

#### UI Starter Kit

Figma

Adobe XD

Free download

#### Design Starter Kit

Figma

Adobe XD

Purchase for $49

                    <!-- Pricing -->
                    <div class="container content-space-2">
                      <!-- Heading -->
                      <div class="w-lg-50 text-center mx-lg-auto mb-5 mb-md-9">
                        <span class="text-cap">Pricing</span>
                        <h2>Simple pricing model</h2>
                      </div>
                      <!-- End Heading -->

                      <div class="d-grid gap-2 w-lg-75 mx-lg-auto">
                        <!-- Card -->
                        <div class="card card-sm" data-aos="fade-up">
                          <div class="card-body">
                            <div class="row align-items-sm-center">
                              <div class="col">
                                <h4 class="card-title">UI Starter Kit</h4>
                              </div>
                              <!-- End Col -->

                              <div class="col">
                                <img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
                                <img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
                              </div>
                              <!-- End Col -->

                              <div class="col">
                                <p class="card-text mb-0">Figma</p>
                                <p class="card-text">Adobe XD</p>
                              </div>
                              <!-- End Col -->

                              <div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
                                <div class="d-grid">
                                  <a class="btn btn-outline-primary" href="#">Free download</a>
                                </div>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->
                          </div>
                        </div>
                        <!-- End Card -->

                        <!-- Card -->
                        <div class="card card-sm" data-aos="fade-up" data-aos-delay="150">
                          <div class="card-body">
                            <div class="row align-items-sm-center">
                              <div class="col">
                                <h4 class="card-title">Design Starter Kit</h4>
                              </div>
                              <!-- End Col -->

                              <div class="col">
                                <img class="avatar avatar-xss avatar-4x3 me-2" src="../assets/svg/brands/figma-icon.svg" alt="Figma">
                                <img class="avatar avatar-xss avatar-4x3" src="../assets/svg/brands/adobe-xd-icon.svg" alt="Adobe XD">
                              </div>
                              <!-- End Col -->

                              <div class="col">
                                <p class="card-text mb-0">Figma</p>
                                <p class="card-text">Adobe XD</p>
                              </div>
                              <!-- End Col -->

                              <div class="col-12 col-sm-4 col-xl-3 mt-3 mt-sm-0">
                                <div class="d-grid">
                                  <a class="btn btn-outline-primary" href="#">Purchase for $49</a>
                                </div>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                    </div>
                    <!-- End Pricing -->