Price component - 5
COPY
<section class="py-5 price-66198 bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="mb-5">
<div class="p-0 text-center">
<h2>Pricing Packages</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>
<div class="row g-0 pt-5">
<!-- pricing item -->
<div class="col-md-4 mb-5">
<div class="pricing-pakg p-5 shadow-sm border h-100 text-center">
<h5 class="mb-3">Personal Plan</h5>
<div class="plan-price my-3">
<h1 class="price fs-1 text-success mb-0 fw-bold">
<sup class="text-grad">$</sup>20
</h1> /month
</div>
<p class="text-muted">Best for individual uses</p>
<a class="btn btn-primary mt-4 mb-5 py-3 px-5" href="#!">Order now!</a>
</div>
</div>
<!-- pricing item -->
<div class="col-md-4 mb-5">
<div class="pricing-pakg p-5 shadow-lg bg-primary text-white h-100 text-center popular-package">
<div class="bg-white bg-opacity-25 fw-normal fs-7 text-white mb-3 d-inline p-2 px-4 rounded-1">POPULAR</div>
<h5 class="mt-4">Business Plan</h5>
<div class="plan-price my-3">
<h1 class="price fs-1 text-grad mb-0 fw-bold">
<sup class="text-grad">$</sup>20
</h1> /month
</div>
<p class="text-white-75">Best for small and medium company</p>
<a class="btn btn-warning text-dark mt-4 mb-5 py-3 px-5" href="#!">Order now!</a>
</div>
</div>
<!-- pricing item -->
<div class="col-md-4 mb-5">
<div class="pricing-pakg p-5 shadow-sm border h-100 text-center">
<h5>Ultimate Plan</h5>
<div class="plan-price my-3">
<h1 class="price fs-1 text-success mb-0 fw-bold">
<sup class="text-grad">$</sup>20
</h1> /month
</div>
<p class="text-muted">Best for corporate company</p>
<a class="btn btn-primary mt-4 mb-5 py-3 px-5" href="#!">Order now!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-green: #0d6efd;
--bs-green-dark: #0055d4;
--bs-black: #000000;
--bs-yellow: #b8d800;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
line-height: normal;
}
.price-66198 a,
.text-primary {
color: var(--bs-primary);
}
.price-66198 a:hover {
color: var(--bs-green-dark);
}
.btn-primary {
background: var(--bs-green);
border: var(--bs-green-dark);
color: var(--bs-white) !important;
}
.btn-primary:hover {
background: var(--bs-green-dark);
border: var(--bs-green-dark);
color: var(--bs-white) !important;
}
.btn-outline-primary {
border-color: var(--bs-green-dark) !important;
}
.btn-outline-primary:hover {
color: #ffffff !important;
background: var(--bs-green);
}
.text-red {
color: var(--bs-red);
}
.shadow {
-webkit-box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.1) !important;
}
.pricing-pakg {
border: 1px solid #f0f1f3;
padding: 50px;
position: relative;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.price.text-success,
.text-grad {
background: var(--bs-yellow);
-webkit-background-clip: text;
background-clip: text;
-WebKit-text-fill-color: transparent;
opacity: 1;
z-index: 9;
}
.fs-7 {
font-size: .85rem !important;
}
.pricing-pakg {
background: url(/html-component/images/bg/pattern-round.png) top left;
}
.popular-package {
background: var(--bs-primary) url(/html-component/images/bg/pattern-round.png) top center;
z-index: 9;
margin-top: -20px;
padding-bottom: 50px;
}
Price component - 4
COPY
<section class="pricing-table">
<div class="container">
<div class="block-heading text-center pt-5 pb-4">
<h2 class="fs-1 fw-semibold">Our Pricing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna, dignissim nec auctor in, mattis vitae leo.</p>
</div>
<div class="row justify-content-md-center">
<div class="col-md-5 col-lg-4">
<div class="item text-center">
<div class="heading">
<h3 class="fw-semibold">BASIC</h3>
</div>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="features">
<ul class="list-unstyled">
<li><span class="feature">Full Support</span> : <span class="value">No</span></li>
<li><span class="feature">Duration</span> : <span class="value">30 Days</span></li>
<li><span class="feature">Storage</span> : <span class="value">10GB</span></li>
</ul>
</div>
<div class="price">
<h4>$25</h4>
</div>
<button class="btn btn-block btn-outline-primary mt-4 mb-5 py-3 px-5" type="submit">BUY NOW</button>
</div>
</div>
<div class="col-md-5 col-lg-4">
<div class="item text-center">
<div class="ribbon">Best Value</div>
<div class="heading">
<h3 class="fw-semibold">PRO</h3>
</div>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="features">
<ul class="list-unstyled">
<li><span class="feature">Full Support</span> : <span class="value">Yes</span></li>
<li><span class="feature">Duration</span> : <span class="value">60 Days</span></li>
<li><span class="feature">Storage</span> : <span class="value">50GB</span></li>
</ul>
</div>
<div class="price">
<h4>$50 <span class="text-decoration-line-through fs-5 text-dark text-opacity-50">$100</span></h4>
</div>
<button class="btn btn-block btn-success mt-4 mb-5 py-3 px-5" type="submit">BUY NOW</button>
</div>
</div>
<div class="col-md-5 col-lg-4">
<div class="item text-center">
<div class="heading">
<h3 class="fw-semibold">PREMIUM</h3>
</div>
<p class="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="features">
<ul class="list-unstyled">
<li><span class="feature">Full Support</span> : <span class="value">Yes</span></li>
<li><span class="feature">Duration</span> : <span class="value">120 Days</span></li>
<li><span class="feature">Storage</span> : <span class="value">150GB</span></li>
</ul>
</div>
<div class="price">
<h4>$150 <span class="text-decoration-line-through fs-5 text-dark text-opacity-50">$200</span></h4>
</div>
<button class="btn btn-block btn-outline-primary mt-4 mb-5 py-3 px-5" type="submit">BUY NOW</button>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-green: #0d6efd;
--bs-green-dark: #0055d4;
--bs-black: #000000;
--bs-yellow: #b8d800;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
line-height: normal;
}
@import url("https://fonts.googleapis.com/css?family=Montserrat");
.pricing-table {
background-color: #eee;
font-family: 'Montserrat', sans-serif;
}
.pricing-table .heading {
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.pricing-table .item {
background-color: #ffffff;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
border-top: 3px solid #5ea4f3;
padding: 30px;
overflow: hidden;
position: relative;
}
.pricing-table .col-md-5:not(:last-child) .item {
margin-bottom: 30px;
}
.pricing-table .item button {
font-weight: 600;
}
.pricing-table .ribbon {
width: 160px;
height: 32px;
font-size: 12px;
text-align: center;
color: #fff;
font-weight: bold;
box-shadow: 0px 2px 3px rgba(136, 136, 136, 0.25);
background: #4dbe3b;
transform: rotate(45deg);
position: absolute;
right: -42px;
top: 20px;
padding-top: 7px;
}
.pricing-table .item p {
text-align: center;
margin-top: 20px;
opacity: 0.7;
}
.pricing-table .features .feature {
font-weight: 600;
}
.pricing-table .features li {
padding: 5px;
}
.pricing-table .price h4 {
margin: 15px 0;
font-size: 35px;
font-weight: 600;
text-align: center;
color: #19d400;
}
.pricing-table .buy-now button {
text-align: center;
margin: auto;
font-weight: 600;
padding: 9px 0;
}
Price component - 3
COPY
<section class="container py-5">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row justify-content-center text-center">
<div class="col-xl-6 col-lg-7 col-md-9 col-sm-11 pt-xl-3">
<h2 class="h1 mb-lg-4">Pricing for You</h2>
<p class="fs-lg text-muted mb-0">Varius sed maecenas massa dictum viverra in. Viverra vel in elit, vivamus dui interdum. Nulla congue lobortis amet amet eleifend.</p>
</div>
</div>
<div class="table-responsive-lg mt-5">
<div class="d-flex align-items-center pb-4">
<!-- Pricing plan 1 -->
<div class="bg-primary rounded-2 p-4 shadow-lg " style="width: 36%; min-width: 18rem;">
<div class="card bg-transparent border-light border-opacity-25 py-3 py-sm-4 py-lg-5">
<div class="card-body text-light text-center">
<h3 class="text-light mb-2">Individual</h3>
<div class="fs-lg opacity-70 pb-4 mb-3">Best for person uses</div>
<div class="display-5 mb-1 fw-semibold">$11</div>
<div class="opacity-50 mb-5">per month</div>
</div>
<div class="card-footer border-0 text-center py-3">
<a href="#" class="btn btn-warning py-3 px-5 shadow-lg">Get started now</a>
</div>
</div>
</div>
<div class="row flex-nowrap border rounded-3 rounded-start-0 shadow g-0" style="width: 64%; min-width: 32rem;">
<!-- Pricing plan 2 -->
<div class="col">
<div class="card bg-light h-100 border-0 border-end rounded-0 py-3 py-sm-4 py-lg-5">
<div class="card-body text-center">
<h3 class="mb-2 text-dark text-opacity-75">Company</h3>
<div class="fs-lg pb-4 mb-3">Best for 10 users</div>
<div class="display-5 text-primary mb-1 fw-semibold">$50</div>
<div class="text-muted mb-5">per month</div>
</div>
<div class="card-footer border-0 text-center py-3">
<a href="#" class="btn btn-warning py-3 px-5 shadow-lg">Get started now</a>
</div>
</div>
</div>
<!-- Pricing plan 3 -->
<div class="col">
<div class="card bg-light h-100 border-0 rounded-start-0 py-3 py-sm-4 py-lg-5">
<div class="card-body text-center">
<h3 class="mb-2 text-dark text-opacity-75">Enterprise</h3>
<div class="fs-lg pb-4 mb-3">Best for large teams</div>
<div class="display-5 text-primary mb-1 fw-semibold">$150</div>
<div class="text-muted mb-5">per month</div>
</div>
<div class="card-footer border-0 text-center py-3">
<a href="#" class="btn btn-warning py-3 px-5 shadow-lg">Get started now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
:root {
--bs-blue: #0d6efd;
--bs-black: #000000;
--bs-primary: var(--bs-blue);
--bs-secondary: var(--bs-black);
}
.bg-primary {
background: var(--bs-primary) !important;
}
Price component - 2
COPY
<section>
<div class="container py-5">
<!-- FOR DEMO PURPOSE -->
<header class="text-center mb-4 text-white">
<div class="row">
<div class="col-lg-7 mx-auto">
<h1 class="display-5 fw-semibold mb-3">Transparent Pricing for You</h1>
<p>Varius sed maecenas massa dictum viverra in. Viverra vel in elit, vivamus dui interdum. Nulla congue lobortis amet amet eleifend.</p>
</div>
</div>
</header>
<!-- END -->
<div class="row text-center align-items-end">
<!-- Pricing Table-->
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 rounded-lg shadow price-item">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Basic</h1>
<h2 class="h1 font-weight-bold text-danger">$199<span class="text-small font-weight-normal ml-2 opacity-50">/ m</span></h2>
<div class="custom-separator my-3 mx-auto bg-dark"></div>
<ul class="list-unstyled my-5 text-small text-left">
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus
</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Nam libero tempore</del>
</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Sed ut perspiciatis</del>
</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Sed ut perspiciatis</del>
</li>
</ul>
<a href="#" class="btn btn-primary btn-block shadow rounded-pill btn-custom px-5 py-3">Subscribe</a>
</div>
</div>
<!-- END -->
<!-- Pricing Table-->
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 rounded-lg shadow price-item">
<h1 class="h6 text-uppercase font-weight-bold mb-4 text-primary">Pro</h1>
<h2 class="h1 font-weight-bold text-danger">$399<span class="text-small font-weight-normal ml-2 opacity-50">/ m</span></h2>
<div class="custom-separator my-3 mx-auto bg-dark"></div>
<ul class="list-unstyled my-5 text-small text-left font-weight-normal">
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Nam libero tempore
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis
</li>
<li class="mb-3 text-muted">
<i class="fa fa-times mr-2"></i>
<del>Sed ut perspiciatis</del>
</li>
</ul>
<a href="#" class="btn btn-danger btn-block shadow rounded-pill btn-custom px-5 py-3">Subscribe</a>
</div>
</div>
<!-- END -->
<!-- Pricing Table-->
<div class="col-lg-4">
<div class="bg-white p-5 rounded-lg shadow price-item">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Enterprise</h1>
<h2 class="h1 font-weight-bold text-danger">$899<span class="text-small font-weight-normal ml-2 opacity-50">/ m</span></h2>
<div class="custom-separator my-3 mx-auto bg-dark"></div>
<ul class="list-unstyled my-5 text-small text-left font-weight-normal">
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Lorem ipsum dolor sit amet
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> At vero eos et accusamus
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Nam libero tempore
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis
</li>
<li class="mb-3">
<i class="fa fa-check mr-2 text-primary"></i> Sed ut perspiciatis
</li>
</ul>
<a href="#" class="btn btn-primary btn-block shadow rounded-pill btn-custom px-5 py-3">Subscribe</a>
</div>
</div>
<!-- END -->
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
:root {
--bs-green: #0d6efd;
--bs-green-dark: #0055d4;
--bs-black: #000000;
--bs-yellow: #b8d800;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
line-height: normal;
background: -webkit-linear-gradient(to right, #00B4DB, #00B4DB);
background: linear-gradient(to right, #00B4DB, #0083B0);
min-height: 100vh;
}
.rounded-lg {
border-radius: 1rem !important;
}
.text-small {
font-size: 0.9rem !important;
}
.custom-separator {
width: 5rem;
height: 2px;
border-radius: 1rem;
}
.text-uppercase {
letter-spacing: 0.2em;
}
.price-item {
color: #514B64;
}
Price component - 1
COPY
<section class="price-section py-5">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-lg-12">
<h2 class="fs-1 fw-semibold">Our Pricing Plan</h2>
<p class="text-muted mt-3 title-subtitle mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam urna, dignissim nec auctor in leo.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="bg-white mt-3 price-box shadow-sm">
<div class="pricing-name">
<h4 class="fs-6 mb-0 border-bottom pb-2 text-dark text-opacity-50">Personal</h4>
</div>
<div class="plan-price mt-4">
<h1 class="text-success mb-0">$9<span>/Month</span></h1>
</div>
<ul class="list-unstyled price-features mt-4">
<li><i class="mdi mdi-check"></i> Bandwidth: <span class="font-weight-bold">1GB</span></li>
<li><i class="mdi mdi-check"></i> Onlinespace: <span class="font-weight-bold">1GB</span></li>
<li><i class="mdi mdi-close"></i> Support: <span class="font-weight-bold">No</span></li>
<li><i class="mdi mdi-check"></i> Domain: <span class="font-weight-bold">1</span></li>
<li><i class="mdi mdi-check"></i> Hidden Fees: <span class="font-weight-bold">No</span></li>
</ul>
<div class="mt-5 text-center">
<a href="#" class="btn btn-success btn-lg btn-custom w-100">Join Now</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bg-white mt-3 price-box shadow-sm">
<div class="pricing-name">
<h4 class="fs-6 mb-0 border-bottom pb-2 text-dark text-opacity-50">Professional</h4>
</div>
<div class="plan-price mt-4">
<h1 class="text-success mb-0">$19<span>/Month</span></h1>
</div>
<ul class="list-unstyled price-features mt-4">
<li><i class="mdi mdi-check"></i> Bandwidth: <span class="font-weight-bold">2GB</span></li>
<li><i class="mdi mdi-check"></i> Onlinespace: <span class="font-weight-bold">5GB</span></li>
<li><i class="mdi mdi-check"></i> Support: <span class="font-weight-bold">Yes</span></li>
<li><i class="mdi mdi-check"></i> Domain: <span class="font-weight-bold">3</span></li>
<li><i class="mdi mdi-check"></i> Hidden Fees: <span class="font-weight-bold">No</span></li>
</ul>
<div class="mt-5 text-center">
<a href="#" class="btn btn-success btn-lg btn-custom w-100">Join Now</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="bg-white mt-3 price-box shadow-sm">
<div class="pricing-name">
<h4 class="fs-6 mb-0 border-bottom pb-2 text-dark text-opacity-50">Enterprise</h4>
</div>
<div class="plan-price mt-4">
<h1 class="text-success mb-0">$29<span>/Month</span></h1>
</div>
<ul class="list-unstyled price-features mt-4">
<li><i class="mdi mdi-check"></i> Bandwidth: <span class="font-weight-bold">3GB</span></li>
<li><i class="mdi mdi-check"></i> Onlinespace: <span class="font-weight-bold">10GB</span></li>
<li><i class="mdi mdi-check"></i> Support: <span class="font-weight-bold">Yes</span></li>
<li><i class="mdi mdi-check"></i> Domain: <span class="font-weight-bold">Unlimited</span></li>
<li><i class="mdi mdi-check"></i> Hidden Fees: <span class="font-weight-bold">No</span></li>
</ul>
<div class="mt-5 text-center">
<a href="#" class="btn btn-success btn-lg btn-custom w-100">Join Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.css');
:root {
--bs-green: #0d6efd;
--bs-green-dark: #0055d4;
--bs-black: #000000;
--bs-yellow: #b8d800;
--bs-primary: var(--bs-green);
--bs-secondary: var(--bs-black);
}
body {
font-family: 'Inter', sans-serif;
font-size: .9rem;
line-height: normal;
}
.price-section {
background-color: #f8f9fa !important;
}
.btn-custom {
font-size: 16px;
padding: 12px 30px;
border-radius: 5px;
}
.price-box {
padding: 40px 50px;
}
.plan-price h1 span {
font-size: 16px;
color: #000;
}
.price-features li {
margin-bottom: 5px;
}
.price-features li i {
height: 24px;
width: 24px;
display: inline-block;
text-align: center;
line-height: 24px;
font-size: 14px;
border-radius: 50%;
margin-right: 8px;
}
.service-box .services-icon,
.price-features li i {
background-color: rgb(25 135 84 / 13%);
color: #198754;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io