Loading...
Xylo UI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Pricing

Quickly build pricing plans for subscription based pricing model.

Xylo component

Cards: Style 1

Icon

Starter

$ 15.00
  • In lorem eget amet sit
  • Sodales sit velit ornare
  • Tristique suspendisse proin
  • Nunc nullam in dignissim
  • Imperdiet amet suspendisse
  • Tristique nibh erat et quis
Icon

Business

$ 35.00
  • In lorem eget amet sit
  • Sodales sit velit ornare
  • Tristique suspendisse proin
  • Nunc nullam in dignissim
  • Imperdiet amet suspendisse
  • Tristique nibh erat et quis 
<!-- Regular pricing plan -->
<div class="card border-0 h-100 py-lg-3" style="max-width: 26rem;">
  <div class="card-body w-100 mx-auto" style="max-width: 21rem;">
    <div class="d-flex align-items-center border-bottom pb-4 mb-4">
      <div class="bg-info rounded flex-shrink-0 p-2">
        <img src="assets/img/landing/saas-1/pricing/starter.svg" class="d-block m-1" width="44" alt="Icon">
      </div>
      <div class="ps-3">
        <h3 class="h4 text-info mb-0">Starter</h3>
        <div class="d-flex align-items-end">
          <span class="h5 mb-1 me-1">$</span>
          <span class="h2 mb-0">15.00</span>
        </div>
      </div>
    </div>
    <ul class="list-unstyled mb-1 pb-4">
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        In lorem eget amet sit
      </li>
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        Sodales sit velit ornare
      </li>
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        Tristique suspendisse proin
      </li>
      <li class="d-flex text-body-secondary pb-1 mb-2">
        <i class="ai-cross lead opacity-80 me-2"></i>
        Nunc nullam in dignissim
      </li>
      <li class="d-flex text-body-secondary pb-1 mb-2">
        <i class="ai-cross lead opacity-80 me-2"></i>
        Imperdiet amet suspendisse
      </li>
      <li class="d-flex text-body-secondary pb-1 mb-2">
        <i class="ai-cross lead opacity-80 me-2"></i>
        Tristique nibh erat et quis
      </li>
    </ul>
    <button type="button" class="btn btn-outline-primary w-100">
      Get this plan now
    </button>
  </div>
</div>

<!-- Featured pricing plan -->
<div class="card border-primary h-100 py-lg-3" style="max-width: 26rem;">
  <div class="card-body w-100 mx-auto" style="max-width: 21rem;">
    <div class="d-flex align-items-center border-bottom pb-4 mb-4">
      <div class="bg-primary rounded flex-shrink-0 p-2">
        <img src="assets/img/landing/saas-1/pricing/business.svg" class="d-block m-1" width="44" alt="Icon">
      </div>
      <div class="ps-3">
        <h3 class="h4 text-primary mb-0">Business</h3>
        <div class="d-flex align-items-end">
          <span class="h5 mb-1 me-1">$</span>
          <span class="h2 mb-0">35.00</span>
        </div>
      </div>
    </div>
    <ul class="list-unstyled mb-1 pb-4">
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        In lorem eget amet sit
      </li>
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        Sodales sit velit ornare
      </li>
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        Tristique suspendisse proin
      </li>
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        Nunc nullam in dignissim
      </li>
      <li class="d-flex pb-1 mb-2">
        <i class="ai-check fs-xl mt-1 me-2"></i>
        Imperdiet amet suspendisse
      </li>
      <li class="d-flex text-body-secondary pb-1 mb-2">
        <i class="ai-cross lead opacity-80 me-2"></i>
        Tristique nibh erat et quis
      </li>
    </ul>
    <button type="button" class="btn btn-primary w-100">
      Get this plan now
    </button>
  </div>
</div>

Cards: Style 2

Light

$8
per day

Phasellus in hendrerit interdum lorem proin pretium dictum urna

Pro

$97
per month

Morbi et massa fames ac scelerisque sit commodo dignissim aucibus

<!-- Regular pricing plan -->
<div class="card h-100 py-lg-4" style="max-width: 26rem;">
  <div class="card-body w-100 mx-auto text-center" style="max-width: 23rem;">
    <h3>Light</h3>
    <div class="display-2 text-primary">$8</div>
    <div class="mb-4">per day</div>
    <p class="mb-4 pb-4">Phasellus in hendrerit interdum lorem proin pretium dictum urna</p>
    <button type="button" class="btn btn-primary w-100">
      Get this plan now
    </button>
  </div>
</div>

<!-- Featured pricing plan -->
<div class="card border-primary bg-primary h-100 py-lg-4" style="max-width: 26rem;">
  <div class="card-body w-100 mx-auto text-center" style="max-width: 23rem;">
    <h3 class="text-light">Pro</h3>
    <div class="display-2 text-light">$97</div>
    <div class="text-light opacity-70 mb-4">per month</div>
    <p class="text-light opacity-70 mb-4 pb-4">Morbi et massa fames ac scelerisque sit commodo dignissim aucibus</p>
    <button type="button" class="btn btn-light w-100">
      Get this plan now
    </button>
  </div>
</div>

List

4 lessons

Valid for all types of classes

$40
$10 per class

8 lessons

Valid for all types of classes

$72
$9 per class

16 lessons

Valid for all types of classes

$120
$7 per class 
<!-- Horizontal pricing plan card (List view) -->
<div class="card border-0 bg-secondary rounded-4 position-relative mb-3">
  <div class="card-body d-sm-flex align-items-start text-center text-sm-start">
    <div class="w-100 pe-sm-4 mb-3 mb-sm-0" style="max-width: 27rem;">
      <h3 class="mb-2">4 lessons</h3>
      <p class="fs-lg mb-0">Valid for all types of classes</p>
    </div>
    <div class="w-100 pe-sm-3 mx-auto me-sm-0 mb-3 mb-sm-0" style="max-width: 8rem;">
      <div class="h3 text-primary mb-0 mb-sm-2">$40</div>
      <span class="fs-sm">$10 per class</span>
    </div>
    <button type="button" class="btn btn-sm btn-outline-primary stretched-link w-100 w-sm-auto">
      Buy
    </button>
  </div>
</div>

Table

  Light Premium Medium
Billed monthly $18 $72 $36
Members Just you Unlimited 3 members
Guest access Just you Unlimited 3 members
File uploads 2 GB 30 GB 10 GB
Features
      
Web, desktop, & mobile apps
Reminders
Priorities
Comments
Integrations 5 Unlimited 15
  
<!-- Pricing comparison table -->
<div class="table-responsive">
  <table class="table text-center text-nowrap">
    <thead>
      <tr>
        <th scope="col" class="border-0 py-3">&nbsp;</th>
        <th scope="col" class="border-0 py-3">
          <span class="h5 mb-0">Light</span>
        </th>
        <th scope="col" class="border-0 py-3">
          <span class="h5 mb-0">Premium</span>
        </th>
        <th scope="col" class="border-0 py-3">
          <span class="h5 mb-0">Medium</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
          <span class="text-body fw-medium">Billed monthly</span>
        </th>
        <td class="border-0 bg-secondary py-3">
          <span class="text-dark">$18</span>
        </td>
        <td class="border-0 bg-secondary py-3">
          <span class="text-dark">$72</span>
        </td>
        <td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3">
          <span class="text-dark">$36</span>
        </td>
      </tr>
      <tr>
        <th scope="row" class="border-0 text-start py-3 ps-4">
          <span class="d-flex align-items-center text-body fw-medium">
            Members
            <i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
          </span>
        </th>
        <td class="border-0 py-3">
          <span class="text-dark">Just you</span>
        </td>
        <td class="border-0 py-3">
          <span class="text-dark">Unlimited</span>
        </td>
        <td class="border-0 py-3">
          <span class="text-dark">3 members</span>
        </td>
      </tr>
      <tr>
        <th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
          <span class="d-flex align-items-center text-body fw-medium">Guest access<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i></span>
        </th>
        <td class="border-0 bg-secondary py-3"><span class="text-dark">Just you</span></td>
        <td class="border-0 bg-secondary py-3"><span class="text-dark">Unlimited</span></td>
        <td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3"><span class="text-dark">3 members</span></td>
      </tr>
      <tr>
        <th scope="row" class="border-0 text-start py-3 ps-4">
          <span class="d-flex align-items-center text-body fw-medium">File uploads<i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i></span>
        </th>
        <td class="border-0 py-3"><span class="text-dark">2 GB</span></td>
        <td class="border-0 py-3"><span class="text-dark">30 GB</span></td>
        <td class="border-0 py-3"><span class="text-dark">10 GB</span></td>
      </tr>
      <tr>
        <th scope="col" class="border-0 text-start pt-4 pb-3 ps-4">
          <div class="h5 pt-1 mb-0">Features</div>
        </th>
        <th scope="col" class="border-0 py-3">&nbsp;</th>
        <th scope="col" class="border-0 py-3">&nbsp;</th>
        <th scope="col" class="border-0 py-3">&nbsp;</th>
      </tr>
      <tr>
        <th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
          <span class="text-body fw-medium">Web, desktop, &amp; mobile apps</span>
        </th>
        <td class="border-0 bg-secondary py-3">
          <i class="ai-cross fs-xl text-danger"></i>
        </td>
        <td class="border-0 bg-secondary py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
        <td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
      </tr>
      <tr>
        <th scope="row" class="border-0 text-start py-3 ps-4">
          <span class="d-flex align-items-center text-body fw-medium">
            Reminders
            <i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
          </span>
        </th>
        <td class="border-0 py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
        <td class="border-0 py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
        <td class="border-0 py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
      </tr>
      <tr>
        <th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
          <span class="text-body fw-medium">Priorities</span>
        </th>
        <td class="border-0 bg-secondary py-3">
          <i class="ai-cross fs-xl text-danger"></i>
        </td>
        <td class="border-0 bg-secondary py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
        <td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
      </tr>
      <tr>
        <th scope="row" class="border-0 text-start py-3 ps-4">
          <span class="d-flex align-items-center text-body fw-medium">
            Comments
            <i class="ai-circle-info fs-lg ms-2" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="right" data-bs-html="true" data-bs-content="Feature description text"></i>
          </span>
        </th>
        <td class="border-0 py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
        <td class="border-0 py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
        <td class="border-0 py-3">
          <i class="ai-check fs-xl text-success"></i>
        </td>
      </tr>
      <tr>
        <th scope="row" class="border-0 bg-secondary rounded-3 rounded-end-0 text-start py-3 ps-4">
          <span class="text-body fw-medium">Integrations</span>
        </th>
        <td class="border-0 bg-secondary py-3">
          <span class="text-dark">5</span>
        </td>
        <td class="border-0 bg-secondary py-3">
          <span class="text-dark">Unlimited</span>
        </td>
        <td class="border-0 rounded-3 rounded-start-0 bg-secondary py-3">
          <span class="text-dark">15</span>
        </td>
      </tr>
      <tr>
        <td class="border-0 pt-4">&nbsp;</td>
        <td class="border-0 pt-4">
          <button type="button" class="btn btn-outline-primary mt-3">Get started $18</button>
        </td>
        <td class="border-0 pt-4">
          <button type="button" class="btn btn-outline-primary mt-3">Get started $72</button>
        </td>
        <td class="border-0 pt-4">
          <button type="button" class="btn btn-outline-primary mt-3">Get started $36</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Price switch

Icon

Starter

$ 15.00 12.00
  • In lorem eget amet sit
  • Sodales sit velit ornare
  • Tristique suspendisse proin
  • Nunc nullam in dignissim
  • Imperdiet amet suspendisse
  • Tristique nibh erat et quis 
<!-- Pricing with monthly / anuall price switch -->
<div class="price-switch-wrapper">

  <!-- Price switch -->
  <div class="text-center py-3 mb-3" data-bs-toggle="price">
    <div class="form-check form-check-inline pe-4">
      <input class="form-check-input" type="radio" id="monthly" name="price" data-monthly-switch checked>
      <label class="form-check-label text-dark fs-base fw-medium" for="monthly">
        Monthly payment
      </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" id="annual" name="price" data-annual-switch>
      <label class="form-check-label text-dark fs-base fw-medium" for="annual">
        Annual payment
      </label>
    </div>
  </div>

  <!-- Pricing plan -->
  <div class="card border-0 h-100 py-lg-3 mx-auto" style="max-width: 26rem;">
    <div class="card-body w-100 mx-auto" style="max-width: 21rem;">
      <div class="d-flex align-items-center border-bottom pb-4 mb-4">
        <div class="bg-info rounded flex-shrink-0 p-2">
          <img src="assets/img/landing/saas-1/pricing/starter.svg" class="d-block m-1" width="44" alt="Icon">
        </div>
        <div class="ps-3">
          <h3 class="h4 text-info mb-0">Starter</h3>
          <div class="d-flex align-items-end">
            <span class="h5 mb-1 me-1">$</span>
            <span class="h2 mb-0" data-monthly-price>15.00</span>
            <span class="h2 mb-0 d-none" data-annual-price>12.00</span>
          </div>
        </div>
      </div>
      <ul class="list-unstyled mb-1 pb-4">
        <li class="d-flex pb-1 mb-2">
          <i class="ai-check fs-xl mt-1 me-2"></i>
          In lorem eget amet sit
        </li>
        <li class="d-flex pb-1 mb-2">
          <i class="ai-check fs-xl mt-1 me-2"></i>
          Sodales sit velit ornare
        </li>
        <li class="d-flex pb-1 mb-2">
          <i class="ai-check fs-xl mt-1 me-2"></i>
          Tristique suspendisse proin
        </li>
        <li class="d-flex text-body-secondary pb-1 mb-2">
          <i class="ai-cross lead opacity-80 me-2"></i>
          Nunc nullam in dignissim
        </li>
        <li class="d-flex text-body-secondary pb-1 mb-2">
          <i class="ai-cross lead opacity-80 me-2"></i>
          Imperdiet amet suspendisse
        </li>
        <li class="d-flex text-body-secondary pb-1 mb-2">
          <i class="ai-cross lead opacity-80 me-2"></i>
          Tristique nibh erat et quis
        </li>
      </ul>
      <button type="button" class="btn btn-outline-primary w-100">
        Get this plan now
      </button>
    </div>
  </div>
</div>