tabler/pages/pricing-table.html

---
title: Pricing table
page-header: Pricing table
menu: extra.pricing-table
---

<div class="card">
	 <div class="table-responsive">
		  <table class="table table-vcenter table-bordered table-nowrap card-table">
				<thead>
				<tr>
					 <td class="w-50">
						  <h2>Pricing plans for teams of all sizes</h2>
						  <div class="text-secondary text-wrap">
								Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.
						  </div>
					 </td>
					 <td class="text-center">
						  <div class="text-uppercase text-secondary font-weight-medium">Starter</div>
						  <div class="display-6 fw-bold my-3">$0</div>
						  <a href="#" class="btn w-100">Choose plan</a>
					 </td>
					 <td class="text-center">
						  <div class="text-uppercase text-secondary font-weight-medium">Professional</div>
						  <div class="display-6 fw-bold my-3">$9</div>
						  <a href="#" class="btn btn-green w-100">Choose plan</a>
					 </td>
					 <td class="text-center">
						  <div class="text-uppercase text-secondary font-weight-medium">Business</div>
						  <div class="display-6 fw-bold my-3">$16</div>
						  <a href="#" class="btn w-100">Choose plan</a>
					 </td>
				</tr>
				</thead>
				<tbody>
				<tr class="bg-light">
					 <th colspan="4" class="subheader">Features</th>
				</tr>
				<tr>
					 <td>Some info about feature</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
				</tr>
				<tr>
					 <td>Online payment gateway</td>
					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
				</tr>
				<tr>
					 <td>Unlimited products can be sold</td>
					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
				</tr>
				<tr class="bg-light">
					 <th colspan="4" class="subheader">Reporting</th>
				</tr>
				<tr>
					 <td>Free hosting and domain name</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
				</tr>
				<tr>
					 <td>Admin dashboard to control items</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
				</tr>
				<tr class="bg-light">
					 <th colspan="4" class="subheader">Support</th>
				</tr>
				<tr>
					 <td>Email marketing and service</td>
					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
				</tr>
				<tr>
					 <td>24/7 customer support online</td>
					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
				</tr>
				</tbody>
				<tfoot>
				<tr>
					 <td></td>
					 <td>
						  <a href="#" class="btn w-100">Choose plan</a>
					 </td>
					 <td>
						  <a href="#" class="btn btn-green w-100">Choose plan</a>
					 </td>
					 <td>
						  <a href="#" class="btn w-100">Choose plan</a>
					 </td>
				</tr>
				</tfoot>
		  </table>
	 </div>
</div>