Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding

Menu

Content

Components

Utilities

Buy now

Pricing

Quickly build pricing plans for subscription based pricing model.

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

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

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

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

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

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 class="border-0 py-3">&nbsp;</th>
        <th class="border-0 py-3">
          <span class="h5 mb-0">Light</span>
        </th>
        <th class="border-0 py-3">
          <span class="h5 mb-0">Premium</span>
        </th>
        <th class="border-0 py-3">
          <span class="h5 mb-0">Medium</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th 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 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 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 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 class="border-0 text-start pt-4 pb-3 ps-4">
          <div class="h5 pt-1 mb-0">Features</div>
        </th>
        <th class="border-0 py-3">&nbsp;</th>
        <th class="border-0 py-3">&nbsp;</th>
        <th class="border-0 py-3">&nbsp;</th>
      </tr>
      <tr>
        <th 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 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 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 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 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>
// Pricing comparison table
.table-responsive
  table.table.text-center.text-nowrap
    thead
      tr
        th.border-0.py-3 &nbsp;
        th.border-0.py-3: span.h5.mb-0 Light
        th.border-0.py-3: span.h5.mb-0 Premium
        th.border-0.py-3: span.h5.mb-0 Medium
    tbody
      tr
        th.border-0.bg-secondary.rounded-3.rounded-end-0.text-start.py-3.ps-4
          span.text-body.fw-medium Billed monthly
        td.border-0.bg-secondary.py-3
          span.text-dark $18
        td.border-0.bg-secondary.py-3
          span.text-dark $72
        td.border-0.rounded-3.rounded-start-0.bg-secondary.py-3
          span.text-dark $36
      tr
        th.border-0.text-start.py-3.ps-4
          span.d-flex.align-items-center.text-body.fw-medium
            | Members
            i.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")
        td.border-0.py-3
          span.text-dark Just you
        td.border-0.py-3
          span.text-dark Unlimited
        td.border-0.py-3
          span.text-dark 3 members
      tr
        th.border-0.bg-secondary.rounded-3.rounded-end-0.text-start.py-3.ps-4
          span.d-flex.align-items-center.text-body.fw-medium
            | Guest access
            i.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")
        td.border-0.bg-secondary.py-3
          span.text-dark Just you
        td.border-0.bg-secondary.py-3
          span.text-dark Unlimited
        td.border-0.rounded-3.rounded-start-0.bg-secondary.py-3
          span.text-dark 3 members
      tr
        th.border-0.text-start.py-3.ps-4
          span.d-flex.align-items-center.text-body.fw-medium
            | File uploads
            i.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")
        td.border-0.py-3
          span.text-dark 2 GB
        td.border-0.py-3
          span.text-dark 30 GB
        td.border-0.py-3
          span.text-dark 10 GB
      tr
        th.border-0.text-start.pt-4.pb-3.ps-4
          .h5.pt-1.mb-0 Features
        th.border-0.py-3 &nbsp;
        th.border-0.py-3 &nbsp;
        th.border-0.py-3 &nbsp;
      tr
        th.border-0.bg-secondary.rounded-3.rounded-end-0.text-start.py-3.ps-4
          span.text-body.fw-medium Web, desktop, &amp; mobile apps
        td.border-0.bg-secondary.py-3
          i.ai-cross.fs-xl.text-danger
        td.border-0.bg-secondary.py-3
          i.ai-check.fs-xl.text-success
        td.border-0.rounded-3.rounded-start-0.bg-secondary.py-3
          i.ai-check.fs-xl.text-success
      tr
        th.border-0.text-start.py-3.ps-4
          span.d-flex.align-items-center.text-body.fw-medium
            | Reminders
            i.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")
        td.border-0.py-3
          i.ai-check.fs-xl.text-success
        td.border-0.py-3
          i.ai-check.fs-xl.text-success
        td.border-0.py-3
          i.ai-check.fs-xl.text-success
      tr
        th.border-0.bg-secondary.rounded-3.rounded-end-0.text-start.py-3.ps-4
          span.text-body.fw-medium Priorities
        td.border-0.bg-secondary.py-3
          i.ai-cross.fs-xl.text-danger
        td.border-0.bg-secondary.py-3
          i.ai-check.fs-xl.text-success
        td.border-0.rounded-3.rounded-start-0.bg-secondary.py-3
          i.ai-check.fs-xl.text-success
      tr
        th.border-0.text-start.py-3.ps-4
          span.d-flex.align-items-center.text-body.fw-medium
            | Comments
            i.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")
        td.border-0.py-3
          i.ai-check.fs-xl.text-success
        td.border-0.py-3
          i.ai-check.fs-xl.text-success
        td.border-0.py-3
          i.ai-check.fs-xl.text-success
      tr
        th.border-0.bg-secondary.rounded-3.rounded-end-0.text-start.py-3.ps-4
          span.text-body.fw-medium Integrations
        td.border-0.bg-secondary.py-3
          span.text-dark 5
        td.border-0.bg-secondary.py-3
          span.text-dark Unlimited
        td.border-0.rounded-3.rounded-start-0.bg-secondary.py-3
          span.text-dark 15
      tr
        td.border-0.pt-4 &nbsp;
        td.border-0.pt-4
          button(type="button").btn.btn-outline-primary.mt-3
            | Get started $18
        td.border-0.pt-4
          button(type="button").btn.btn-outline-primary.mt-3
            | Get started $72
        td.border-0.pt-4
          button(type="button").btn.btn-outline-primary.mt-3
            | Get started $36

Price switch

Icon

Starter

$15.0012.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-muted pb-1 mb-2">
          <i class="ai-cross lead opacity-80 me-2"></i>
          Nunc nullam in dignissim
        </li>
        <li class="d-flex text-muted pb-1 mb-2">
          <i class="ai-cross lead opacity-80 me-2"></i>
          Imperdiet amet suspendisse
        </li>
        <li class="d-flex text-muted 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>
// Pricing with monthly / anuall price switch
.price-switch-wrapper

  // Price switch
  .text-center.py-3.mb-3(data-bs-toggle="price")
    .form-check.form-check-inline.pe-4
      input(type="radio", id="monthly", name="price", data-monthly-switch, checked).form-check-input
      label(for="monthly").form-check-label.text-dark.fs-base.fw-medium
        | Monthly payment
    .form-check.form-check-inline
      input(type="radio", id="annual", name="price", data-annual-switch).form-check-input
      label(for="annual").form-check-label.text-dark.fs-base.fw-medium
        | Annual payment
  
  // Pricing plan
  .card.border-0.h-100.py-lg-3.mx-auto(style="max-width: 26rem;")
    .card-body.w-100.mx-auto(style="max-width: 21rem;")
      .d-flex.align-items-center.border-bottom.pb-4.mb-4
        .bg-info.rounded.flex-shrink-0.p-2
          img(src="assets/img/landing/saas-1/pricing/starter.svg", width="44", alt="Icon").d-block.m-1
        .ps-3
          h3.h4.text-info.mb-0 Starter
          .d-flex.align-items-end
            span.h5.mb-1.me-1 $
            span(data-monthly-price).h2.mb-0
              | 15.00
            span(data-annual-price).h2.mb-0.d-none
              | 12.00
      ul.list-unstyled.mb-1.pb-4
        li.d-flex.pb-1.mb-2
          i.ai-check.fs-xl.mt-1.me-2
          | In lorem eget amet sit
        li.d-flex.pb-1.mb-2
          i.ai-check.fs-xl.mt-1.me-2
          | Sodales sit velit ornare
        li.d-flex.pb-1.mb-2
          i.ai-check.fs-xl.mt-1.me-2
          | Tristique suspendisse proin
        li.d-flex.text-muted.pb-1.mb-2
          i.ai-cross.lead.opacity-80.me-2
          | Nunc nullam in dignissim
        li.d-flex.text-muted.pb-1.mb-2
          i.ai-cross.lead.opacity-80.me-2
          | Imperdiet amet suspendisse
        li.d-flex.text-muted.pb-1.mb-2
          i.ai-cross.lead.opacity-80.me-2
          | Tristique nibh erat et quis
      button(type="button").btn.btn-outline-primary.w-100
        | Get this plan now