价格 - Snippets | Front - 基于Boostrap5的多用途响应式模板库

Component #1

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

高级 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="图片描述内容">
                          </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">高级 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

价格

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

设计 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">设计 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="../assets/vendor/nouislider/dist/nouislider.min.css">

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

                <!-- JS Front -->

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

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

账户中心 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

企业贸易es 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">开始使用</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

预览
HTML

Choose a plan that's right for you.

Everything you need. From front to back.

	Professional $0/mon	Team 火热 $60/mon
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
激活 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

预览
HTML

Scalable plans

All kinds of plans that scale with your user growth

Starter

免费/h3>

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

预览
HTML

价格

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.

开始使用

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="图片描述内容">
                            </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://www.52abp.com/College">开始使用</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

预览
HTML

价格

Simple pricing model

UI Starter Kit

Figma

Adobe XD

Free download

设计 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">设计 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 -->