Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

new: Pricing table (#1117)

Browse Source
This commit is contained in:
Paweł Kuna
2022-05-08 15:09:58 +02:00
committed by GitHub
parent 3872d48492
commit 62532090b8
5 changed files with 118 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/_data/menu.yml
View File

@@ -156,6 +156,9 @@ extra:
pricing:
url: pricing.html
title: Pricing cards
pricing-table:
url: pricing-table.html
title: Pricing table
faq:
url: faq.html
title: FAQ

102
src/pages/pricing-table.html Normal file
View File

@@ -0,0 +1,102 @@
---
title: Pricing table
page-header: Pricing table
menu: extra.pricing-table
---
<div class="card">
<table class="table table-vcenter table-bordered card-table">
<thead>
<tr>
<td class="w-50">
<h2>Pricing plans for teams of all sizes</h2>
<div class="text-muted">
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-muted 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-muted 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-muted 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">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">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">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>

6
src/scss/_variables.scss
View File

@@ -66,7 +66,7 @@ $display-font-sizes: (
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
6: 2rem
) !default;
$lead-font-size: $font-size-base !default;
@@ -261,7 +261,9 @@ $size-spacers: (
$size-values: map-merge($spacers, (
25: 25%,
33: 33.33333%,
50: 50%,
66: 66.66666%,
75: 75%,
100: 100%,
auto: auto
@@ -549,7 +551,7 @@ $spinner-border-width-sm: 1px !default;
//tables
$table-color: inherit !default;
$table-cell-padding-x: .5rem !default;
$table-cell-padding-x: .75rem !default;
$table-cell-padding-y: .75rem !default;
$table-border-color: $border-color-transparent !default;
$table-th-border-color: $border-color-transparent !default;

21
src/scss/ui/_cards.scss
View File

@@ -412,40 +412,37 @@ Card table
margin-bottom: 0 !important;
tr {
.card-header ~ .table-responsive &,
.card-header ~ & {
&:first-child td {
//border-top: 0;
}
}
td,
th {
//border-top: 1px solid $border-color;
&:first-child {
padding-left: $card-spacer-x;
border-left: 0;
}
&:last-child {
padding-right: $card-spacer-x;
border-right: 0;
}
}
}
thead {
thead,
tbody,
tfoot {
tr {
&:first-child {
border-top: 0;
td,
th {
border-top: 0;
}
}
}
}
tbody {
tr:last-child {
border-bottom: 0;
td,
th {
border-bottom: 0;

1
src/scss/utils/_colors.scss
View File

@@ -3,7 +3,6 @@
// All colors
@each $color, $value in theme-colors() {
.bg-#{"" + $color} {
color: #ffffff !important;
background: $value !important;
}