Pricing
Quickly build pricing plans for subscription based pricing model.
Around component
Cards: Style 1
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
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"> </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"> </th>
<th class="border-0 py-3"> </th>
<th class="border-0 py-3"> </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, & 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"> </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
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
th.border-0.py-3
th.border-0.py-3
tr
th.border-0.bg-secondary.rounded-3.rounded-end-0.text-start.py-3.ps-4
span.text-body.fw-medium Web, desktop, & 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
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
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