Createx Buy now

Pricing

Quickly build pricing plans for subscription based pricing model.

Createx component

Vertical pricing plan

Free

From$0per m2
  • 20 millions tracks
  • Shuffle play
  • No ads
  • Get unlimited skips
  • Offline mode
  • 7 profiles
Get started

Family

From$15per m2
  • 20 millions tracks
  • Shuffle play
  • No ads
  • Get unlimited skips
  • Offline mode
  • 7 profiles
Get started
<!-- Vertical pricing plan -->
<div class="card card-hover shadow">
  <div class="card-img-top bg-dark text-center py-grid-gutter">
    <h3 class="text-white mb-0">Free</h3>
  </div>
  <div class="card-body px-5">
    <div class="d-flex align-items-end justify-content-center mb-4 py-2 px-4">
      <span class="lead text-dark me-2">From</span>
      <span class="price display-4 text-primary px-1 me-2">$0</span>
      <span class="lead text-dark">per m<sup class="fs-xxs fw-bold">2</sup></span>
    </div>
    <ul class="list-unstyled mb-0 pb-2">
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-2 opacity-90">
        <i class="ci-cross text-muted me-2"></i>
        <span class="text-muted">No ads</span>
      </li>
      <li class="d-flex align-items-center mb-2 opacity-90">
        <i class="ci-cross text-muted me-2"></i>
        <span class="text-muted">Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-2 opacity-90">
        <i class="ci-cross text-muted me-2"></i>
        <span class="text-muted">Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-2 opacity-90">
        <i class="ci-cross text-muted me-2"></i>
        <span class="text-muted">7 profiles</span>
      </li>
    </ul>
  </div>
  <div class="card-footer pt-0 border-0 text-center">
    <a class="btn btn-outline-primary mb-4" href="#">Get started</a>
  </div>
</div>

<!-- Featured vertical pricing plan -->
<div class="card card-hover border-primary shadow">
  <div class="card-img-top bg-primary text-center py-grid-gutter">
    <h3 class="text-white mb-0">Family</h3>
  </div>
  <div class="card-body px-5">
    <div class="d-flex align-items-end justify-content-center py-2 px-4 mb-4">
      <span class="lead text-dark me-2">From</span>
      <span class="price display-4 text-primary px-1 me-2">$15</span>
      <span class="lead text-dark">per m<sup class="fs-xxs fw-bold">2</sup></span>
    </div>
    <ul class="list-unstyled mb-0 pb-2">
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>20 millions tracks</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Shuffle play</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>No ads</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Get unlimited skips</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Offline mode</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>7 profiles</span>
      </li>
    </ul>
  </div>
  <div class="card-footer pt-0 border-0 text-center">
    <a class="btn btn-primary mb-4" href="#">Get started</a>
  </div>
</div>

Vertical pricing plan alt

Basic

$24/mon
  • Advanced Analytics
  • Change Management
  • Corporate Finance
  • One Way Link Building
  • Social Media Marketing
  • Strategy & Marketing
  • Information Technology
Choose plan

Optimal

$64/mon
  • Advanced Analytics
  • Change Management
  • Corporate Finance
  • One Way Link Building
  • Social Media Marketing
  • Strategy & Marketing
  • Information Technology
Choose plan
<!-- Vertical pricing plan alt -->
<div class="card card-hover shadow">
  <div class="card-img-top text-center pt-4">
    <h3 class="mt-3 mb-2">Basic</h3>
  </div>
  <div class="card-body pt-0">
    <div class="display-4 d-flex justify-content-center mb-3 py-2 px-4 text-primary">
      $24
      <sup class="lead fw-bold mt-4 ms-2">/mon</sup>
    </div>
    <hr class="hr-gradient mx-n4 mb-4">
    <ul class="list-unstyled d-table mx-auto mb-0 pb-2">
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Advanced Analytics</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Change Management</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Corporate Finance</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>One Way Link Building</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-primary me-2"></i>
        <span>Social Media Marketing</span>
      </li>
      <li class="d-flex align-items-center mb-2 opacity-90">
        <i class="ci-cross text-muted me-2"></i>
        <span class="text-muted">Strategy & Marketing</span>
      </li>
      <li class="d-flex align-items-center mb-2 opacity-90">
        <i class="ci-cross text-muted me-2"></i>
        <span class="text-muted">Information Technology</span>
      </li>
    </ul>
  </div>
  <div class="card-footer pt-0 border-0 text-center">
    <a class="btn btn-outline-primary mb-4" href="#">Choose plan</a>
  </div>
</div>

<!-- Featured vertical pricing plan alt -->
<div class="card card-hover shadow border-success bg-dark">
  <div class="card-img-top text-center pt-4">
    <h3 class="mt-3 mb-2 text-white">Optimal</h3>
  </div>
  <div class="card-body pt-0">
    <div class="display-4 d-flex justify-content-center mb-3 py-2 px-4 text-success">
      $64
      <sup class="lead fw-bold mt-4 ms-2">/mon</sup>
    </div>
    <hr class="hr-gradient hr-light mx-n4 mb-4">
    <ul class="list-unstyled d-table mx-auto mb-0 pb-2">
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-success me-2"></i>
        <span class="text-white">Advanced Analytics</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-success me-2"></i>
        <span class="text-white">Change Management</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-success me-2"></i>
        <span class="text-white">Corporate Finance</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-success me-2"></i>
        <span class="text-white">One Way Link Building</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-success me-2"></i>
        <span class="text-white">Social Media Marketing</span>
      </li>
      <li class="d-flex align-items-center mb-2">
        <i class="ci-checkmark text-success me-2"></i>
        <span class="text-white">Strategy & Marketing</span>
      </li>
      <li class="d-flex mb-2 opacity-50">
        <i class="ci-cross text-muted me-2"></i>
        <span class="text-white">Information Technology</span>
      </li>
    </ul>
  </div>
  <div class="card-footer pt-0 border-0 text-center">
    <a class="btn btn-primary mb-4" href="#">Choose plan</a>
  </div>
</div>

Price switcher

Basic

$24/mon
  • Advanced Analytics
  • Change Management
  • Corporate Finance
  • One Way Link Building
  • Social Media Marketing
  • Strategy & Marketing
  • Information Technology
Choose plan

Optimal

$64/mon
  • Advanced Analytics
  • Change Management
  • Corporate Finance
  • One Way Link Building
  • Social Media Marketing
  • Strategy & Marketing
  • Information Technology
Choose plan

Premium

$98/mon
  • Advanced Analytics
  • Change Management
  • Corporate Finance
  • One Way Link Building
  • Social Media Marketing
  • Strategy & Marketing
  • Information Technology
Choose plan
<!-- Vertical pricing plan wrapper -->
<div class="pricing-wrap">

  <!-- Price switch -->
  <div class="col-6 mx-auto">
    <div class="price-switch switch">
      <input class="switch-input visually-hidden" type="checkbox" id="switchAlt">
      <label class="switch-label" for="switchAlt">
        <span class="switch-label-item">Monthly</span>
        <span class="switch-label-item">Yearly
          <small class="ms-2 fs-xs fw-normal">-12% Off</small>
        </span>
      </label>
    </div>
  </div>
  
  <div class="row mt-5 pt-3">
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">

      <!-- Plan card -->
      <div class="card card-hover shadow h-100">
        <div class="card-img-top text-center pt-4">
          <h3 class="mt-3 mb-2">Basic</h3>
        </div>
        <div class="card-body pt-0">
          <div class="display-4 d-flex justify-content-center mb-3 py-2 px-4 text-primary">$
            <span class="price" data-current-price="24" data-new-price="20">24</span>
            <sup class="lead fw-bold mt-4 ms-2">/mon</sup>
          </div>
          <hr class="hr-gradient mx-n4 mb-4">
          <ul class="list-unstyled d-table mx-auto mb-0 pb-2">
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Advanced Analytics</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Change Management</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Corporate Finance</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>One Way Link Building</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Social Media Marketing</span>
            </li>
            <li class="d-flex align-items-center mb-2 opacity-90">
              <i class="ci-cross text-muted me-2"></i>
              <span class="text-muted">Strategy & Marketing</span>
            </li>
            <li class="d-flex align-items-center mb-2 opacity-90">
              <i class="ci-cross text-muted me-2"></i>
              <span class="text-muted">Information Technology</span>
            </li>
          </ul>
        </div>
        <div class="card-footer pt-0 border-0 text-center">
          <a class="btn btn-outline-primary mb-4" href="#">Choose plan</a>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">

      <!-- Featured plan card -->
      <div class="card card-hover shadow border-success bg-dark h-100">
        <div class="card-img-top text-center pt-4">
          <h3 class="mt-3 mb-2 text-white">Optimal</h3>
        </div>
        <div class="card-body pt-0">
          <div class="display-4 d-flex justify-content-center mb-3 py-2 px-4 text-success">$
            <span class="price" data-current-price="64" data-new-price="60">64</span>
            <sup class="lead fw-bold mt-4 ms-2">/mon</sup>
          </div>
          <hr class="hr-gradient hr-light mx-n4 mb-4">
          <ul class="list-unstyled d-table mx-auto mb-0 pb-2">
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-success me-2"></i>
              <span class="text-white">Advanced Analytics</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-success me-2"></i>
              <span class="text-white">Change Management</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-success me-2"></i>
              <span class="text-white">Corporate Finance</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-success me-2"></i>
              <span class="text-white">One Way Link Building</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-success me-2"></i>
              <span class="text-white">Social Media Marketing</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-success me-2"></i>
              <span class="text-white">Strategy & Marketing</span>
            </li>
            <li class="d-flex mb-2 opacity-50">
              <i class="ci-cross text-muted me-2"></i>
              <span class="text-white">Information Technology</span>
            </li>
          </ul>
        </div>
        <div class="card-footer pt-0 border-0 text-center">
          <a class="btn btn-primary mb-4" href="#">Choose plan</a>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mb-grid-gutter">

      <!-- Plan card -->
      <div class="card card-hover shadow h-100">
        <div class="card-img-top text-center pt-4">
          <h3 class="mt-3 mb-2">Premium</h3>
        </div>
        <div class="card-body pt-0">
          <div class="display-4 d-flex justify-content-center mb-3 py-2 px-4 text-primary">$
            <span class="price" data-current-price="98" data-new-price="92">98</span>
            <sup class="lead fw-bold mt-4 ms-2">/mon</sup>
          </div>
          <hr class="hr-gradient mx-n4 mb-4">
          <ul class="list-unstyled d-table mx-auto mb-0 pb-2">
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Advanced Analytics</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Change Management</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Corporate Finance</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>One Way Link Building</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Social Media Marketing</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Strategy & Marketing</span>
            </li>
            <li class="d-flex align-items-center mb-2">
              <i class="ci-checkmark text-primary me-2"></i>
              <span>Information Technology</span>
            </li>
          </ul>
        </div>
        <div class="card-footer pt-0 border-0 text-center">
          <a class="btn btn-outline-primary mb-4" href="#">Choose plan</a>
        </div>
      </div>
    </div>
  </div>
</div>

Pricing table

Items
Basic
$20 per m2
Standard
$30 per m2
Business
$40 per m2
Installation plan
Planning solutions (2-3 options)
Lighting plan
Flooring plan
Heating floor laying scheme
Air conditioner zones layout
3D visualization of all rooms simplified
Visualization of each room (3-4 angles)
Terms 10 days 20 days 30 days
Send request
Send request
Send request
 
<!-- Pricing table -->
<div class="table-responsive border rounded shadow-sm">
  <table class="table table-striped">
    <thead>
      <tr class="text-center">
        <th class="p-4 border-0 text-start text-nowrap fs-lg text-dark">Items</th>
        <th class="w-20 p-4 border-0">
          <div class="h4 mt-2 mb-0 text-uppercase">Basic</div>
          <div class="fs-lg text-muted">$20 per m2</div>
        </th>
        <th class="w-20 p-4 border-0">
          <div class="h4 mt-2 mb-0 text-uppercase">Standard</div>
          <div class="fs-lg text-muted">$30 per m2</div>
        </th>
        <th class="w-20 p-4 border-0">
          <div class="h4 mt-2 mb-0 text-uppercase">Business</div>
          <div class="fs-lg text-muted">$40 per m2</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Installation plan</td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Planning solutions (2-3 options)</td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Lighting plan</td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Flooring plan</td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Heating floor laying scheme</td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Air conditioner zones layout</td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">3D visualization of all rooms</td>
        <td class="w-20 py-3 border-0">simplified</td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Visualization of each room (3-4 angles)</td>
        <td class="w-20 py-3 border-0"></td>
        <td class="w-20 py-3 border-0"></td>
        <td class="w-20 py-3 border-0"><i class="ci-checkmark text-primary lead"></i></td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap">Terms</td>
        <td class="w-20 py-3 border-0">10 days</td>
        <td class="w-20 py-3 border-0">20 days</td>
        <td class="w-20 py-3 border-0">30 days</td>
      </tr>
      <tr class="text-center">
        <td class="py-3 px-4 border-0 text-start text-nowrap"></td>
        <td class="w-20 py-3 border-0">
          <div class="py-3">
            <a class="btn btn-outline-primary py-2 px-4" href="#">Send request</a>
          </div>
        </td>
        <td class="w-20 py-3 border-0">
          <div class="py-3">
            <a class="btn btn-outline-primary py-2 px-4" href="#">Send request</a>
          </div>
        </td>
        <td class="w-20 py-3 border-0">
          <div class="py-3">
            <a class="btn btn-outline-primary py-2 px-4" href="#">Send request</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
Top