Logo v2.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v2.3.1
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Foundations
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid
  • Testimonials
  • Blogs
    Grid List
  • Pricing
  • Team Sections
  • Call-to-Action (CTA)
  • Modals
  • Portfolio
  • Gallery
  • Clients
  • FAQ
  • Lists
  • Comments
  • User Profile
  • Sidebar Nav Examples
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Directory
  • Subscribe
  • Contact / Footer
  • Contact Sections
  • Footer

Pricing

Component #1

  • Preview
  • HTML

Find the right plan for your team

Pay as you go service, cancel anytime.

$ 19 /mo
Professional

All the basics for starting a new business

  • 1 user
  • Space plan features
  • 1 app
No card required
$ 39 /mo
Team

Everything you need for a growing business

  • 3 users
  • Space plan features
  • 3 apps
  • Product support
No card required
$ 59 /mo
Enterprise

Advanced features for scaling your business

  • Unlimited users
  • Space plan features
  • Unlimited apps
  • Product support
No card required
Customized

Design a custom package for your business

Contact sales
See full feature table Hide feature table
Basic Premium
Financial data
Open/High/Low/Close
Price-volume difference indicator
On-chain data
Network growth
Average token age consumed
Exchange flow
Total ERC20 exchange funds flow
Transaction volume
Total circulation (beta)
Velocity of tokens (beta)
ETH gas used
Social data
Dev activity
Topic search
Relative social dominance
Total social volume
              
                <!-- Pricing -->
                <div class="container">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>Find the right plan for your team</h3>
                    <p class="fs-6">Pay as you go service, cancel anytime.</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-warning text-dark rounded-pill ms-1">Save 10%</span>
                            </span>
                          </span>
                        </span>
                      </label>
                    </div>
                  </div>
                  <!-- End Form Switch -->

                  <!-- Card Group -->
                  <div class="w-lg-85 shadow-lg rounded mx-lg-auto mb-7">
                    <div class="row card-group-md-row card-group-md-3">
                      <div class="col-md mb-3 mb-md-0">
                        <!-- Card -->
                        <div class="card card-lg">
                          <div class="card-header text-center">
                            <div class="mb-2">
                              <span class="fs-5 align-top text-dark fw-bold">$</span>
                              <span id="pricingCount1" class="fs-2 text-dark fw-bold"
                                     data-hs-toggle-switch-item-options='{
                                       "min": 29,
                                       "max": 19
                                     }'>19</span>
                              <span>/mo</span>
                            </div>

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

                          <div class="card-body d-flex justify-content-center h-100 py-0">
                            <!-- List Checked -->
                            <ul class="list-checked list-checked-primary">
                              <li class="list-checked-item">1 user</li>
                              <li class="list-checked-item">Space 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>
                            <small class="d-block text-muted">No card required</small>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

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

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

                          <div class="card-body d-flex justify-content-center h-100 py-0">
                            <!-- List Checked -->
                            <ul class="list-checked list-checked-primary">
                              <li class="list-checked-item">3 users</li>
                              <li class="list-checked-item">Space 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>
                            <small class="d-block text-muted">No card required</small>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

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

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

                          <div class="card-body d-flex justify-content-center h-100 py-0">
                            <!-- List Checked -->
                            <ul class="list-checked list-checked-primary">
                              <li class="list-checked-item">Unlimited users</li>
                              <li class="list-checked-item">Space 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>
                            <small class="d-block text-muted">No card required</small>
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-12">
                        <!-- Card -->
                        <div class="card card-lg card-divider">
                          <div class="card-body">
                            <div class="row">
                              <div class="col-sm mb-3 mb-sm-0">
                                <h5 class="card-title">Customized</h5>
                                <p class="card-text">Design a custom package for your business</p>
                              </div>
                              <!-- End Col -->

                              <div class="col-sm-auto">
                                <a class="btn btn-white" href="#">Contact sales <i class="bi-chevron-right small ms-2"></i></a>
                              </div>
                              <!-- End Col -->
                            </div>
                            <!-- End Row -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                  <!-- End Card Group -->

                  <div class="w-lg-85 mx-lg-auto">
                    <!-- Info -->
                    <div class="text-center">
                      <a class="link link-collapse" data-bs-toggle="collapse" href="#collapseFullPricingTable" role="button" aria-expanded="false" aria-controls="collapseFullPricingTable">
                        <span class="link-collapse-default">
                          See full feature table <i class="bi-plus-circle ms-1"></i>
                        </span>
                        <span class="link-collapse-active">
                          Hide feature table <i class="bi-dash-circle ms-1"></i>
                        </span>
                      </a>
                    </div>
                    <!-- End Info -->

                    <!-- Link Collapse -->
                    <div class="collapse" id="collapseFullPricingTable">
                      <!-- Table -->
                      <div class="table-responsive-sm mt-10">
                        <table class="table table-lg table-striped table-borderless">
                          <thead>
                            <tr class="table-align-middle">
                              <th scope="col"></th>
                              <th scope="col" class="table-text-center h5">Basic</th>
                              <th scope="col" class="table-text-center h5">Premium</th>
                            </tr>
                          </thead>

                          <tbody>
                            <tr>
                              <th scope="row" class="h6 fw-bold">Financial data</th>
                              <td></td>
                              <td></td>
                            </tr>

                            <tr>
                              <th scope="row">Open/High/Low/Close</th>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Price-volume difference indicator</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row" class="h6 fw-bold">On-chain data</th>
                              <td></td>
                              <td></td>
                            </tr>

                            <tr>
                              <th scope="row">Network growth</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Average token age consumed</th>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Exchange flow</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Total ERC20 exchange funds flow</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Transaction volume</th>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Total circulation (beta)</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Velocity of tokens (beta)</th>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">ETH gas used</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row" class="h6 fw-bold">Social data</th>
                              <td></td>
                              <td></td>
                            </tr>

                            <tr>
                              <th scope="row">Dev activity</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Topic search</th>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Relative social dominance</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>

                            <tr>
                              <th scope="row">Total social volume</th>
                              <td class="table-text-center">
                                <i class="bi-dash text-body"></i>
                              </td>
                              <td class="table-text-center">
                                <i class="bi-check-circle text-primary"></i>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!-- End Table -->
                    </div>
                    <!-- Link Collapse -->
                  </div>
                </div>
                <!-- End Pricing -->
              
            

Component #2

  • Preview
  • HTML

Find the right plan for your team

Pay as you go service, cancel anytime.

Total users Image Description Price per user
$29 / user
$79 / user
$129 / user
Enterprise pricing

Need bigger plan?

Contact our sales team
              
                <!-- Pricing -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>Find the right plan for your team</h3>
                    <p class="fs-6">Pay as you go service, cancel anytime.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="w-md-75 w-lg-65 mx-md-auto mb-7">
                    <!-- Table -->
                    <div class="table-responsive-sm">
                      <table class="table table-lg">
                        <thead>
                          <tr class="table-align-middle">
                            <th scope="col">Total users</th>
                            <th scope="col" class="table-text-center">
                              <img class="avatar avatar-4x3 me-2" src="../assets/svg/illustrations/oc-money-profits.svg" alt="Image Description" style="width: 3.75rem">
                              Price per user
                            </th>
                            <th scope="col"></th>
                          </tr>
                        </thead>

                        <tbody>
                          <tr class="js-form-check-row-select form-check-row-select table-align-middle">
                            <th scope="row" style="min-width: 10rem;">
                              <div class="form-check form-check-custom">
                                <input class="form-check-input" type="radio" name="pricingRadio" id="pricingRadio1">
                                <label class="form-check-label" for="pricingRadio1">
                                  1-10
                                </label>
                              </div>
                            </th>
                            <td class="table-text-center">$29 / user</td>
                            <td class="text-end">
                              <button type="button" class="btn btn-outline-primary">Select plan</button>
                            </td>
                          </tr>

                          <tr class="js-form-check-row-select form-check-row-select table-align-middle checked">
                            <th scope="row" style="min-width: 10rem;">
                              <div class="form-check form-check-custom">
                                <input class="form-check-input" type="radio" name="pricingRadio" id="pricingRadio2" checked>
                                <label class="form-check-label" for="pricingRadio2">
                                  11-50 <span class="badge bg-warning text-dark rounded-pill ms-1">Popular</span>
                                </label>
                              </div>
                            </th>
                            <td class="table-text-center">$79 / user</td>
                            <td class="text-end">
                              <button type="button" class="btn btn-outline-primary">Select plan</button>
                            </td>
                          </tr>

                          <tr class="js-form-check-row-select form-check-row-select table-align-middle">
                            <th scope="row" style="min-width: 10rem;">
                              <div class="form-check form-check-custom">
                                <input class="form-check-input" type="radio" name="pricingRadio" id="pricingRadio3">
                                <label class="form-check-label" for="pricingRadio3">
                                  51-100
                                </label>
                              </div>
                            </th>
                            <td class="table-text-center">$129 / user</td>
                            <td class="text-end">
                              <button type="button" class="btn btn-outline-primary">Select plan</button>
                            </td>
                          </tr>

                          <tr class="js-form-check-row-select form-check-row-select table-align-middle">
                            <th scope="row" style="min-width: 10rem;">
                              <div class="form-check form-check-custom">
                                <input class="form-check-input" type="radio" name="pricingRadio" id="pricingRadio4">
                                <label class="form-check-label" for="pricingRadio4">
                                  100+
                                </label>
                              </div>
                            </th>
                            <td class="table-text-center">Enterprise pricing</td>
                            <td class="text-end">
                              <button type="button" class="btn btn-outline-primary">Select plan</button>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <!-- End Table -->
                  </div>

                  <!-- Info -->
                  <div class="text-center">
                    <p class="mb-0">Need bigger plan?</p>
                    <a class="link" href="../page-contacts.html">Contact our sales team <i class="bi-chevron-right small ms-1"></i></a>
                  </div>
                  <!-- End Info -->
                </div>
                <!-- End Pricing -->
              
            

Component #3

  • Preview
  • HTML

Find the right plan for your team

Pay as you go service, cancel anytime.

Image Description
$ 19 .00

Per account, per month

Includes all that you needed:
  • Up to 10 people
  • Unlimited apps
  • Sales opportunities
  • API access & Space integration
  • Advanced account security
  • Enterprise response SLA
Empowering independent business owners everywhere
Try for free
              
                <!-- Pricing -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>Find the right plan for your team</h3>
                    <p class="fs-6">Pay as you go service, cancel anytime.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="row align-items-sm-center col-sm-divider mb-5 mb-sm-10">
                    <div class="col-sm-6 col-md-4 offset-md-2">
                      <div class="text-center">
                        <img class="avatar avatar-xxl avatar-4x3" src="../assets/svg/illustrations/oc-money-profits.svg" alt="Image Description">

                        <div class="text-primary fw-bold">
                          <span class="fs-4 align-top">$</span>
                          <span class="display-1">19</span>
                          <span class="fs-6">.00</span>
                        </div>

                        <p>Per account, per month</p>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6">
                      <div class="ps-sm-3 ps-md-5">
                        <div class="mb-4">
                          <h5>Includes all that you needed:</h5>
                        </div>

                        <!-- List Checked -->
                        <ul class="list-checked list-checked-primary mb-0">
                          <li class="list-checked-item">Up to 10 people <i class="bi-info-circle text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="The number of teammates that can access your Space workspace"></i></li>
                          <li class="list-checked-item">Unlimited apps</li>
                          <li class="list-checked-item">Sales opportunities <i class="bi-info-circle text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Track potential sales, such as a bid, deal or proposal."></i></li>
                          <li class="list-checked-item">API access & Space integration <i class="bi-info-circle text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Programmatically manage Segment workspaces, sources, destinations, and more"></i></li>
                          <li class="list-checked-item">Advanced account security <i class="bi-info-circle text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Protect your workspace with personalized security settings"></i></li>
                          <li class="list-checked-item">Enterprise response SLA</li>
                        </ul>
                        <!-- End List Checked -->
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="mx-auto" style="max-width: 31.25rem;">
                    <!-- Alert -->
                    <div class="alert alert-soft-primary" role="alert">
                      <div class="d-sm-flex align-items-sm-center">
                        <div class="flex-shrink-0 mb-3 mb-sm-0">
                          <span class="svg-icon text-primary mb-3">
                            @@include("../assets/vendor/duotone-icons/gen/gen022.svg")
                          </span>
                        </div>

                        <div class="flex-grow-1 text-dark ms-sm-3 mb-3 mb-sm-0">Empowering independent business owners everywhere</div>

                        <div class="flex-shrink-0 ms-sm-3">
                          <a class="btn btn-primary" href="#">Try for free</a>
                        </div>
                      </div>
                    </div>
                    <!-- End Alert -->
                  </div>
                </div>
                <!-- End Pricing -->