Component with custom price table.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
The code to generate the component is this:
<section class="pricing-table table01">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-5 col-lg-4">
<div class="item">
<div class="heading">
<h3>BASIC</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="features">
<h4><span class="feature">Full Support</span> : <span class="value">No</span></h4>
<h4><span class="feature">Duration</span> : <span class="value">30 Days</span></h4>
<h4><span class="feature">Storage</span> : <span class="value">10GB</span></h4>
</div>
<div class="price">
<h4>$25</h4>
</div>
<button class="btn btn-block btn-outline-primary" type="submit">BUY NOW</button>
</div>
</div>
<div class="col-md-5 col-lg-4">
<div class="item">
<div class="ribbon">Best Value</div>
<div class="heading">
<h3>PRO</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="features">
<h4><span class="feature">Full Support</span> : <span class="value">Yes</span></h4>
<h4><span class="feature">Duration</span> : <span class="value">60 Days</span></h4>
<h4><span class="feature">Storage</span> : <span class="value">50GB</span></h4>
</div>
<div class="price">
<h4>$50</h4>
</div>
<button class="btn btn-block btn-primary" type="submit">BUY NOW</button>
</div>
</div>
<div class="col-md-5 col-lg-4">
<div class="item">
<div class="heading">
<h3>PREMIUM</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="features">
<h4><span class="feature">Full Support</span> : <span class="value">Yes</span></h4>
<h4><span class="feature">Duration</span> : <span class="value">120 Days</span></h4>
<h4><span class="feature">Storage</span> : <span class="value">150GB</span></h4>
</div>
<div class="price">
<h4>$150</h4>
</div>
<button class="btn btn-block btn-outline-primary" type="submit">BUY NOW</button>
</div>
</div>
</div>
</div>
</section>
The code to generate the component is this:
<div class="col-12 pricing-table table02">
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="plan">
<div class="plan-price bg-light">
<h3>Standard</h3> <span class="plan-currency">$</span> <span class="value">19,90</span> <span class="period">/ per month</span>
</div>
<div class="plan-features">
<ul>
<li>5GB Disk Space</li>
<li>10 Email Accounts</li>
<li>5GB Monthly Bandwidth</li>
<li>Unlimited Subdomains</li>
<li>Automatic Cloud Backup</li>
</ul>
<a class="btn btn-block btn-secondary" href="#">Sign Up</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="plan">
<div class="plan-price bg-light">
<h3>Premium</h3> <span class="plan-currency">$</span> <span class="value">29,90</span> <span class="period">/ per month</span>
</div>
<div class="plan-features">
<ul>
<li>10GB Disk Space</li>
<li>15 Email Accounts</li>
<li>10GB Monthly Bandwidth</li>
<li>Unlimited Subdomains</li>
<li>Automatic Cloud Backup</li>
</ul>
<a class="btn btn-block btn-secondary" href="#">Sign Up</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="plan">
<div class="plan-price bg-primary">
<h3 class="text-white">Ultimate</h3> <span class="plan-currency">$</span> <span class="value">39,90</span> <span class="period">/ per month</span>
</div>
<div class="plan-features">
<ul>
<li>15GB Disk Space</li>
<li>15 Email Accounts</li>
<li>15GB Monthly Bandwidth</li>
<li>Unlimited Subdomains</li>
<li>Automatic Cloud Backup</li>
</ul>
<a class="btn btn-block btn-primary" href="#">Sign Up</a>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="plan">
<div class="plan-price bg-light">
<h3>Ultra</h3> <span class="plan-currency">$</span> <span class="value">49,90</span> <span class="period">/ per month</span>
</div>
<div class="plan-features">
<ul>
<li>35GB Disk Space</li>
<li>25 Email Accounts</li>
<li>35GB Monthly Bandwidth</li>
<li>Unlimited Subdomains</li>
<li>Automatic Cloud Backup</li>
</ul>
<a class="btn btn-block btn-secondary" href="#">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
The code to generate the component is this:
<div class="pricing-table table03 card-deck flex-column flex-md-row mb-3">
<div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 bg-primary text-white shadow-sm">Starter</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="15">$<span class="price">3</span><span class="h6 text-muted ml-2">/ per month</span></h1>
</div>
<div class="card-body pt-0">
<ul class="list-unstyled mb-4">
<li>Up to 5 users</li>
<li>Basic support</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul> <button type="button" class="btn btn-outline-secondary mb-3 hvr">Order now</button>
</div>
</div>
<div class="card card-pricing popular shadow text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 bg-primary text-white shadow-sm">Professional</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="30">$<span class="price">6</span><span class="h6 text-muted ml-2">/ per month</span></h1>
</div>
<div class="card-body pt-0">
<ul class="list-unstyled mb-4">
<li>Up to 10 users</li>
<li>Email Support support</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul> <a href="#" target="_blank" class="btn btn-primary mb-3">Order Now</a>
</div>
</div>
<div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 bg-primary text-white shadow-sm">Business</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="45">$<span class="price">9</span><span class="h6 text-muted ml-2">/ per month</span></h1>
</div>
<div class="card-body pt-0">
<ul class="list-unstyled mb-4">
<li>Up to 15 users</li>
<li>Email & phone support</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul> <button type="button" class="btn btn-outline-secondary mb-3 hvr">Order now</button>
</div>
</div>
<div class="card card-pricing text-center px-3 mb-4"> <span class="h6 w-60 mx-auto px-4 py-1 bg-primary text-white shadow-sm">Enterprise</span>
<div class="bg-transparent card-header pt-4 border-0">
<h1 class="h1 font-weight-normal text-primary text-center mb-0" data-pricing-value="60">$<span class="price">12</span><span class="h6 text-muted ml-2">/ per month</span></h1>
</div>
<div class="card-body pt-0">
<ul class="list-unstyled mb-4">
<li>Up to 20 users</li>
<li>Basic support</li>
<li>Monthly updates</li>
<li>Free cancelation</li>
</ul> <button type="button" class="btn btn-outline-secondary mb-3 hvr">Order now</button>
</div>
</div>
</div>
The code to generate the component is this:
<div class="pricing-table table04">
<div class="text-center">
<div class="block d-inline-flex">
<div class="p-4 p-sm-5"> <sup class="text-sm">$</sup><span class="h1">12</span>
<div class="text-muted">Regular license</div>
<div class="py-4"><a href="#" class="btn btn-sm btn-rounded btn-primary" data-abc="true">Purchase</a></div> <small class="text-muted">End-product <strong>not</strong> for sale</small>
</div>
<div class="p-4 p-sm-5"> <sup class="text-sm">$</sup><span class="h1">60</span>
<div class="text-muted">Extended license</div>
<div class="py-4"><a href="#" class="btn btn-sm btn-rounded btn-primary" data-abc="true">Purchase</a></div> <small class="text-muted">Unlimited End-product for sale</small>
</div>
</div>
</div>
</div>
The code to generate the component is this:
<div class="row text-center align-items-end pricing-table table07">
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Basic</h1>
<h2 class="h1 font-weight-bold">$9<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-warning"></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> 5GB Disk Space</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 10 Email Accounts</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 5 GB Monthly Bandwidth</li>
<li class="mb-3 text-muted"> <i class="fa fa-times mr-2"></i> <del>Unlimited Subdomain</del> </li>
<li class="mb-3 text-muted"> <i class="fa fa-times mr-2"></i> <del>Automatic Cloud Backup</del> </li>
</ul> <a href="#" class="btn btn-warning btn-block p-2 shadow">Subscribe</a>
</div>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="bg-white p-5 shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Pro</h1>
<h2 class="h1 font-weight-bold">$19<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-warning"></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> 10GB Disk Space</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 15 Email Accounts</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 10GB Monthly Bandwidth</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> Unlimited Subdomain</li>
<li class="mb-3"> <i class="fa fa-times mr-2"></i> <del>Automatic Cloud Backup</del></li>
</ul> <a href="#" class="btn btn-warning btn-block p-2 shadow">Subscribe</a>
</div>
</div>
<div class="col-lg-4">
<div class="bg-white p-5 shadow">
<h1 class="h6 text-uppercase font-weight-bold mb-4">Enterprise</h1>
<h2 class="h1 font-weight-bold">$29<span class="text-small font-weight-normal ml-2">/ month</span></h2>
<div class="custom-separator my-4 mx-auto bg-warning"></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> 15GB Disk Space </li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 15 Email Accounts </li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> 15GB Monthly Bandwidth</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> Unlimited Subdomains</li>
<li class="mb-3"> <i class="fa fa-check mr-2 text-primary"></i> Automatic Cloud Backup</li>
</ul> <a href="#" class="btn btn-warning btn-block p-2 shadow">Subscribe</a>
</div>
</div>
</div>