pricing-table.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. ---
  2. title: Pricing table
  3. page-header: Pricing table
  4. menu: extra.pricing-table
  5. ---
  6. <div class="card">
  7. <div class="table-responsive">
  8. <table class="table table-vcenter table-bordered table-nowrap card-table">
  9. <thead>
  10. <tr>
  11. <td class="w-50">
  12. <h2>Pricing plans for teams of all sizes</h2>
  13. <div class="text-secondary text-wrap">
  14. Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.
  15. </div>
  16. </td>
  17. <td class="text-center">
  18. <div class="text-uppercase text-secondary font-weight-medium">Starter</div>
  19. <div class="display-6 fw-bold my-3">$0</div>
  20. <a href="#" class="btn w-100">Choose plan</a>
  21. </td>
  22. <td class="text-center">
  23. <div class="text-uppercase text-secondary font-weight-medium">Professional</div>
  24. <div class="display-6 fw-bold my-3">$9</div>
  25. <a href="#" class="btn btn-green w-100">Choose plan</a>
  26. </td>
  27. <td class="text-center">
  28. <div class="text-uppercase text-secondary font-weight-medium">Business</div>
  29. <div class="display-6 fw-bold my-3">$16</div>
  30. <a href="#" class="btn w-100">Choose plan</a>
  31. </td>
  32. </tr>
  33. </thead>
  34. <tbody>
  35. <tr class="bg-light">
  36. <th colspan="4" class="subheader">Features</th>
  37. </tr>
  38. <tr>
  39. <td>Some info about feature</td>
  40. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  41. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  42. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  43. </tr>
  44. <tr>
  45. <td>Online payment gateway</td>
  46. <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
  47. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  48. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  49. </tr>
  50. <tr>
  51. <td>Unlimited products can be sold</td>
  52. <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
  53. <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
  54. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  55. </tr>
  56. <tr class="bg-light">
  57. <th colspan="4" class="subheader">Reporting</th>
  58. </tr>
  59. <tr>
  60. <td>Free hosting and domain name</td>
  61. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  62. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  63. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  64. </tr>
  65. <tr>
  66. <td>Admin dashboard to control items</td>
  67. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  68. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  69. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  70. </tr>
  71. <tr class="bg-light">
  72. <th colspan="4" class="subheader">Support</th>
  73. </tr>
  74. <tr>
  75. <td>Email marketing and service</td>
  76. <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
  77. <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
  78. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  79. </tr>
  80. <tr>
  81. <td>24/7 customer support online</td>
  82. <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
  83. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  84. <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
  85. </tr>
  86. </tbody>
  87. <tfoot>
  88. <tr>
  89. <td></td>
  90. <td>
  91. <a href="#" class="btn w-100">Choose plan</a>
  92. </td>
  93. <td>
  94. <a href="#" class="btn btn-green w-100">Choose plan</a>
  95. </td>
  96. <td>
  97. <a href="#" class="btn w-100">Choose plan</a>
  98. </td>
  99. </tr>
  100. </tfoot>
  101. </table>
  102. </div>
  103. </div>