mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
106 lines
4.3 KiB
HTML
106 lines
4.3 KiB
HTML
---
|
|
title: Pricing table
|
|
page-header: Pricing table
|
|
page-menu: extra.pricing-table
|
|
layout: default
|
|
permalink: pricing-table.html
|
|
---
|
|
|
|
<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-surface-tertiary">
|
|
<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-surface-tertiary">
|
|
<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-surface-tertiary">
|
|
<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> |