Pricing - Snippets | Unity - Multipurpose Responsive Template

Component #1

Preview
HTML

Solo, agency or team? We’ve got you covered.

Professional

Everything a small team needs.

$18.99

USD / monthly

Up to 10 people
Collect data
Code extensibility

Custom reports
Product support
Activity reporting

Cancel anytime. No card required.

Start free trial

Teams

For growing businesses.

$36.99

USD / monthly

Up to 10 people
Collect data
Code extensibility

Custom reports
Product support
Activity reporting

Cancel anytime. No card required.

Start free trial

Prices in USD. Taxes may apply.

              
                <!-- Pricing -->
                <div class="overflow-hidden">
                  <div class="container content-space-1">
                    <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10">
                      <h2>Solo, agency or team? We’ve got you covered.</h2>
                    </div>

                    <div class="position-relative">
                      <div class="row mb-5">
                        <div class="col-lg-6 mb-4 mb-lg-0">
                          <!-- Card -->
                          <div class="card card-lg h-100">
                            <div class="card-body">
                              <div class="mb-3">
                                <h4 class="mb-1">Professional</h4>
                                <p>Everything a small team needs.</p>
                              </div>
                              
                              <!-- Media -->
                              <div class="d-flex mb-5">
                                <div class="flex-shrink-0">
                                  <span class="display-4 lh-1 text-dark">$18<span class="fs-4">.99</span></span>
                                </div>
                                <div class="flex-grow-1 align-self-end ms-3">
                                  <span class="d-block">USD / monthly</span>
                                </div>
                              </div>
                              <!-- End Media -->

                              <div class="row">
                                <div class="col-sm-6">
                                  <!-- List Checked -->
                                  <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2">
                                    <li class="list-checked-item">Up to 10 people</li>
                                    <li class="list-checked-item">Collect data</li>
                                    <li class="list-checked-item">Code extensibility</li>
                                  </ul>
                                  <!-- End List Checked -->
                                </div>
                                <!-- End Col -->
                                
                                <div class="col-sm-6">
                                  <!-- List Checked -->
                                  <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2">
                                    <li class="list-unchecked-item">Custom reports</li>
                                    <li class="list-unchecked-item">Product support</li>
                                    <li class="list-unchecked-item">Activity reporting</li>
                                  </ul>
                                  <!-- End List Checked -->
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>

                            <div class="card-footer pt-0">
                              <div class="row align-items-center">
                                <div class="col">
                                  <span class="fs-5 text-muted d-block">Cancel anytime.</span>
                                  <span class="fs-5 text-muted d-block">No card required.</span>
                                </div>
                                <!-- End Col -->
                                
                                <div class="col-auto">
                                  <a class="btn btn-white" href="#">Start free trial</a>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->

                        <div class="col-lg-6">
                          <!-- Card -->
                          <div class="card card-lg card-shadow card-pinned h-100">
                            <span class="badge bg-dark text-white card-pinned-top-end">Most popular</span>

                            <div class="card-body">
                              <div class="mb-3">
                                <h4 class="mb-1">Teams</h4>
                                <p>For growing businesses.</p>
                              </div>
                              
                              <!-- Media -->
                              <div class="d-flex mb-5">
                                <div class="flex-shrink-0">
                                  <span class="display-4 lh-1 text-dark">$36<span class="fs-4">.99</span></span>
                                </div>
                                <div class="flex-grow-1 align-self-end ms-3">
                                  <span class="d-block">USD / monthly</span>
                                </div>
                              </div>
                              <!-- End Media -->

                              <div class="row">
                                <div class="col-sm-6">
                                  <!-- List Checked -->
                                  <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2">
                                    <li class="list-checked-item">Up to 10 people</li>
                                    <li class="list-checked-item">Collect data</li>
                                    <li class="list-checked-item">Code extensibility</li>
                                  </ul>
                                  <!-- End List Checked -->
                                </div>
                                <!-- End Col -->

                                <div class="col-sm-6">
                                  <!-- List Checked -->
                                  <ul class="list-checked list-checked-soft-bg-warning fs-4 mb-2">
                                    <li class="list-checked-item">Custom reports</li>
                                    <li class="list-checked-item">Product support</li>
                                    <li class="list-checked-item">Activity reporting</li>
                                  </ul>
                                  <!-- End List Checked -->
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>

                            <div class="card-footer pt-0">
                              <div class="row align-items-center">
                                <div class="col">
                                  <span class="fs-5 text-muted d-block">Cancel anytime.</span>
                                  <span class="fs-5 text-muted d-block">No card required.</span>
                                </div>
                                <!-- End Col -->
                                
                                <div class="col-auto">
                                  <a class="btn btn-primary" href="#">Start free trial</a>
                                </div>
                                <!-- End Col -->
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute top-0 end-0 zi-n1 d-none d-md-block mt-10 me-n10" style="width: 4rem;">
                        <img class="img-fluid" src="../assets/svg/components/pointer-up.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute bottom-0 start-0 zi-n1 ms-n10 mb-n10" style="width: 15rem;">
                        <img class="img-fluid" src="../assets/svg/components/curved-shape.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->
                    </div>

                    <div class="text-center">
                      <p class="fs-6 text-muted mb-0">Prices in USD. Taxes may apply.</p>
                    </div>
                  </div>
                </div>
                <!-- End Pricing -->

Compare plans

	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 Table -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h3>Compare plans</h3>
                  </div>
                  <!-- End Heading -->

                  <!-- Table -->
                  <div class="table-responsive-sm">
                    <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>
                <!-- End Pricing Table -->