Pricing
These sections are sections on websites or applications that present the cost and features of different plans, products, or services.
Overview
"Pricing" blocks are sections on websites or applications that present the cost and features of different plans, products, or services. These blocks typically include pricing tiers, plan names, feature comparisons, and call-to-action buttons, helping users evaluate and choose the option that best fits their needs and budget.
Examples
Below are a few examples of "Pricing" sections.
Example 1
Pricing
Choose a plan that fits your needs
Free
$0/mo
- 10 users included
- 2 GB of storage
- Help center access
- Call support
Pro
$19/mo
- 20 users included
- 10 GB of storage
- Help center access
- Call support
Premium
$29/mo
- 30 users included
- 15 GB of storage
- Help center access
- Priority call support
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Pricing</h1>
<h2 class="mb-4">Choose a plan that fits your needs</h2>
</div>
<div class="row g-3 g-lg-4">
<div class="col-md-4">
<div class="card text-center border shadow">
<div class="card-header mb-2">
<h4 class="fw-normal mb-0"><i class="ri-sparkling-fill text-primary me-2"></i>Free</h4>
</div>
<div class="card-body">
<div class="display-4 fw-medium">$0<span class="text-muted fs-5">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4 d-inline-block text-start">
<li><i class="ri-check-line text-success"></i> 10 users included</li>
<li><i class="ri-check-line text-success"></i> 2 GB of storage</li>
<li><i class="ri-close-line text-danger"></i> Help center access</li>
<li><i class="ri-close-line text-danger"></i> Call support</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-lg btn-outline-secondary">Choose Plan</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-center border shadow">
<div class="card-header mb-2">
<h4 class="fw-normal mb-0"><i class="ri-user-2-fill text-primary me-2"></i>Pro</h4>
</div>
<div class="card-body">
<div class="display-4 fw-medium">$19<span class="text-muted fs-5">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4 d-inline-block text-start">
<li><i class="ri-check-line text-success"></i> 20 users included</li>
<li><i class="ri-check-line text-success"></i> 10 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center access</li>
<li><i class="ri-check-line text-success"></i> Call support</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-lg btn-outline-secondary">Choose Plan</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card bg-secondary text-center border shadow">
<div class="card-header mb-2">
<h4 class="fw-normal mb-0"><i class="ri-shield-star-fill text-primary me-2"></i>Premium</h4>
</div>
<div class="card-body">
<div class="display-4 fw-medium">$29<span class="text-muted fs-5">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4 d-inline-block text-start">
<li><i class="ri-check-line text-success"></i> 30 users included</li>
<li><i class="ri-check-line text-success"></i> 15 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center access</li>
<li><i class="ri-check-line text-success"></i> Priority call support</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-lg btn-primary">Choose Plan</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold text-uppercase
fs-5 mb-2">Pricing</h1> <h2 class="mb-4">Choose a plan that fits
your needs</h2> </div> <div class="row g-3 g-lg-4"> <div
class="col-md-4"> <div class="card text-center border shadow">
<div class="card-header mb-2"> <h4 class="fw-normal mb-0"><i
class="ri-sparkling-fill text-primary me-2"></i>Free</h4> </div>
<div class="card-body"> <div class="display-4
fw-medium">$0<span class="text-muted fs-5">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4 d-inline-block text-start"> <li><i
class="ri-check-line text-success"></i> 10 users included</li>
<li><i class="ri-check-line text-success"></i> 2 GB of
storage</li> <li><i class="ri-close-line text-danger"></i>
Help center access</li> <li><i class="ri-close-line
text-danger"></i> Call support</li> </ul> <div
class="text-center"> <button type="button" class="btn btn-lg
btn-outline-secondary">Choose Plan</button> </div> </div> </div>
</div> <div class="col-md-4"> <div class="card text-center border
shadow"> <div class="card-header mb-2"> <h4 class="fw-normal
mb-0"><i class="ri-user-2-fill text-primary
me-2"></i>Pro</h4> </div> <div class="card-body">
<div class="display-4 fw-medium">$19<span class="text-muted
fs-5">/mo</span></div> <ul class="list-unstyled mt-3 mb-4
d-inline-block text-start"> <li><i class="ri-check-line
text-success"></i> 20 users included</li> <li><i
class="ri-check-line text-success"></i> 10 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center
access</li> <li><i class="ri-check-line text-success"></i>
Call support</li> </ul> <div class="text-center"> <button
type="button" class="btn btn-lg btn-outline-secondary">Choose
Plan</button> </div> </div> </div> </div> <div
class="col-md-4"> <div class="card bg-secondary text-center border
shadow"> <div class="card-header mb-2"> <h4 class="fw-normal
mb-0"><i class="ri-shield-star-fill text-primary
me-2"></i>Premium</h4> </div> <div class="card-body">
<div class="display-4 fw-medium">$29<span class="text-muted
fs-5">/mo</span></div> <ul class="list-unstyled mt-3 mb-4
d-inline-block text-start"> <li><i class="ri-check-line
text-success"></i> 30 users included</li> <li><i
class="ri-check-line text-success"></i> 15 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center
access</li> <li><i class="ri-check-line text-success"></i>
Priority call support</li> </ul> <div class="text-center">
<button type="button" class="btn btn-lg btn-primary">Choose
Plan</button> </div> </div> </div> </div> </div>
</div> </section>
Example 2
Pricing
Get started with the plan that suits you
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
Free
$0/mo
- 10 users included
- 2 GB of storage
- Help center access
- Call support
Pro
$9/mo
- 20 users included
- 10 GB of storage
- Help center access
- Call support
Team
$19/mo
- 30 users included
- 15 GB of storage
- Help center access
- Priority call support
Enterprise
$29/mo
- 100 users included
- 80 GB of storage
- Help center access
- Priority call support
<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-md-6 mb-2 mb-md-0">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Pricing</h1>
<h2 class="mb-0">Get started with the plan that suits you</h2>
</div>
<div class="col-md-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
</p>
</div>
</div>
<div class="row g-4">
<div class="col-md-6 col-xl-3">
<h4 class="fw-normal text-center"><i class="ri-sparkling-fill text-primary"></i> Free</h4>
<div class="card border shadow">
<div class="card-body">
<div class="display-5 fw-medium">$0<span class="text-muted fs-6">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4">
<li><i class="ri-check-line text-success"></i> 10 users included</li>
<li><i class="ri-check-line text-success"></i> 2 GB of storage</li>
<li><i class="ri-close-line text-danger"></i> Help center access</li>
<li><i class="ri-close-line text-danger"></i> Call support</li>
</ul>
<button type="button" class="btn btn-lg btn-outline-secondary w-100">Select</button>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<h4 class="fw-normal text-center"><i class="ri-user-star-fill text-primary"></i> Pro</h4>
<div class="card border shadow">
<div class="card-body">
<div class="display-5 fw-medium">$9<span class="text-muted fs-6">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4">
<li><i class="ri-check-line text-success"></i> 20 users included</li>
<li><i class="ri-check-line text-success"></i> 10 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center access</li>
<li><i class="ri-check-line text-success"></i> Call support</li>
</ul>
<button type="button" class="btn btn-lg btn-outline-secondary w-100">Select</button>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<h4 class="fw-normal text-center"><i class="ri-group-3-fill text-primary"></i> Team</h4>
<div class="card border shadow">
<div class="card-body">
<div class="display-5 fw-medium">$19<span class="text-muted fs-6">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4">
<li><i class="ri-check-line text-success"></i> 30 users included</li>
<li><i class="ri-check-line text-success"></i> 15 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center access</li>
<li><i class="ri-check-line text-success"></i> Priority call support</li>
</ul>
<button type="button" class="btn btn-lg btn-outline-secondary w-100">Select</button>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<h4 class="fw-normal text-center"><i class="ri-shield-star-fill text-primary"></i> Enterprise</h4>
<div class="card bg-secondary border shadow">
<div class="card-body">
<div class="display-5 fw-medium">$29<span class="text-muted fs-6">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4">
<li><i class="ri-check-line text-success"></i> 100 users included</li>
<li><i class="ri-check-line text-success"></i> 80 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center access</li>
<li><i class="ri-check-line text-success"></i> Priority call support</li>
</ul>
<button type="button" class="btn btn-lg btn-primary w-100">Select</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-md-6 mb-2 mb-md-0"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Pricing</h1> <h2
class="mb-0">Get started with the plan that suits you</h2> </div>
<div class="col-md-6"> <p class="text-muted mb-0"> Lorem ipsum
dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos
provident nulla nemo! Quam impedit dolores vel sit amet. </p> </div> </div>
<div class="row g-4"> <div class="col-md-6 col-xl-3"> <h4
class="fw-normal text-center"><i class="ri-sparkling-fill
text-primary"></i> Free</h4> <div class="card border
shadow"> <div class="card-body"> <div class="display-5
fw-medium">$0<span class="text-muted fs-6">/mo</span></div>
<ul class="list-unstyled mt-3 mb-4"> <li><i class="ri-check-line
text-success"></i> 10 users included</li> <li><i
class="ri-check-line text-success"></i> 2 GB of storage</li>
<li><i class="ri-close-line text-danger"></i> Help center
access</li> <li><i class="ri-close-line text-danger"></i> Call
support</li> </ul> <button type="button" class="btn btn-lg
btn-outline-secondary w-100">Select</button> </div> </div>
</div> <div class="col-md-6 col-xl-3"> <h4 class="fw-normal
text-center"><i class="ri-user-star-fill text-primary"></i>
Pro</h4> <div class="card border shadow"> <div
class="card-body"> <div class="display-5 fw-medium">$9<span
class="text-muted fs-6">/mo</span></div> <ul
class="list-unstyled mt-3 mb-4"> <li><i class="ri-check-line
text-success"></i> 20 users included</li> <li><i
class="ri-check-line text-success"></i> 10 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center
access</li> <li><i class="ri-check-line text-success"></i>
Call support</li> </ul> <button type="button" class="btn btn-lg
btn-outline-secondary w-100">Select</button> </div> </div>
</div> <div class="col-md-6 col-xl-3"> <h4 class="fw-normal
text-center"><i class="ri-group-3-fill text-primary"></i>
Team</h4> <div class="card border shadow"> <div
class="card-body"> <div class="display-5 fw-medium">$19<span
class="text-muted fs-6">/mo</span></div> <ul
class="list-unstyled mt-3 mb-4"> <li><i class="ri-check-line
text-success"></i> 30 users included</li> <li><i
class="ri-check-line text-success"></i> 15 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center
access</li> <li><i class="ri-check-line text-success"></i>
Priority call support</li> </ul> <button type="button" class="btn
btn-lg btn-outline-secondary w-100">Select</button> </div> </div>
</div> <div class="col-md-6 col-xl-3"> <h4 class="fw-normal
text-center"><i class="ri-shield-star-fill text-primary"></i>
Enterprise</h4> <div class="card bg-secondary border shadow"> <div
class="card-body"> <div class="display-5 fw-medium">$29<span
class="text-muted fs-6">/mo</span></div> <ul
class="list-unstyled mt-3 mb-4"> <li><i class="ri-check-line
text-success"></i> 100 users included</li> <li><i
class="ri-check-line text-success"></i> 80 GB of storage</li>
<li><i class="ri-check-line text-success"></i> Help center
access</li> <li><i class="ri-check-line text-success"></i>
Priority call support</li> </ul> <button type="button" class="btn
btn-lg btn-primary w-100">Select</button> </div> </div> </div>
</div> </div> </section>
Example 3
Pricing
Choose a plan that fits your needs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
| Free | Pro | Premium | |
|---|---|---|---|
| Price | $0/mo | $19/mo | $29/mo |
| Users Included | 10 | 20 | 30 |
| Storage | 2 GB | 10 GB | 15 GB |
| Help Center Access | |||
| Call Support | |||
<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-lg-6 mb-2 mb-lg-0">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Pricing</h1>
<h2 class="mb-0">Choose a plan that fits your needs</h2>
</div>
<div class="col-lg-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
</p>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped text-center align-middle">
<thead>
<tr class="fs-5">
<th scope="col"></th>
<th scope="col"><i class="ri-sparkling-fill text-primary"></i> Free</th>
<th scope="col"><i class="ri-user-2-fill text-primary"></i> Pro</th>
<th scope="col"><i class="ri-shield-star-fill text-primary"></i> Premium</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start">Price</th>
<td>$0/mo</td>
<td>$19/mo</td>
<td>$29/mo</td>
</tr>
<tr>
<th scope="row" class="text-start">Users Included</th>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<th scope="row" class="text-start">Storage</th>
<td>2 GB</td>
<td>10 GB</td>
<td>15 GB</td>
</tr>
<tr>
<th scope="row" class="text-start">Help Center Access</th>
<td><i class="ri-close-line text-danger"></i></td>
<td><i class="ri-check-line text-primary"></i></td>
<td><i class="ri-check-line text-primary"></i></td>
</tr>
<tr>
<th scope="row" class="text-start">Call Support</th>
<td><i class="ri-close-line text-danger"></i></td>
<td><i class="ri-check-line text-primary"></i></td>
<td><i class="ri-check-line text-primary"></i></td>
</tr>
<tr>
<td></td>
<td><button class="btn btn-lg btn-outline-secondary text-nowrap">Choose Plan</button></td>
<td><button class="btn btn-lg btn-outline-secondary text-nowrap">Choose Plan</button></td>
<td><button class="btn btn-lg btn-primary text-nowrap">Choose Plan</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-lg-6 mb-2 mb-lg-0"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Pricing</h1> <h2
class="mb-0">Choose a plan that fits your needs</h2> </div> <div
class="col-lg-6"> <p class="text-muted mb-0"> Lorem ipsum dolor sit
amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident
nulla nemo! Quam impedit dolores vel sit amet. </p> </div> </div> <div
class="table-responsive"> <table class="table table-striped text-center
align-middle"> <thead> <tr class="fs-5"> <th
scope="col"></th> <th scope="col"><i
class="ri-sparkling-fill text-primary"></i> Free</th> <th
scope="col"><i class="ri-user-2-fill text-primary"></i>
Pro</th> <th scope="col"><i class="ri-shield-star-fill
text-primary"></i> Premium</th> </tr> </thead> <tbody>
<tr> <th scope="row" class="text-start">Price</th>
<td>$0/mo</td> <td>$19/mo</td> <td>$29/mo</td> </tr>
<tr> <th scope="row" class="text-start">Users
Included</th> <td>10</td> <td>20</td> <td>30</td>
</tr> <tr> <th scope="row"
class="text-start">Storage</th> <td>2 GB</td> <td>10
GB</td> <td>15 GB</td> </tr> <tr> <th scope="row"
class="text-start">Help Center Access</th> <td><i
class="ri-close-line text-danger"></i></td> <td><i
class="ri-check-line text-primary"></i></td> <td><i
class="ri-check-line text-primary"></i></td> </tr> <tr>
<th scope="row" class="text-start">Call Support</th>
<td><i class="ri-close-line text-danger"></i></td>
<td><i class="ri-check-line text-primary"></i></td>
<td><i class="ri-check-line text-primary"></i></td>
</tr> <tr> <td></td> <td><button class="btn btn-lg
btn-outline-secondary text-nowrap">Choose Plan</button></td>
<td><button class="btn btn-lg btn-outline-secondary text-nowrap">Choose
Plan</button></td> <td><button class="btn btn-lg btn-primary
text-nowrap">Choose Plan</button></td> </tr> </tbody>
</table> </div> </div> </section>
ESC