widgets.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. ---
  2. title: Widgets
  3. page-header: Widgets
  4. menu: extra.widgets
  5. page-libs: [apexcharts]
  6. ---
  7. <div class="row row-cards">
  8. <div class="col-lg-6">
  9. {% include "cards/project-progress.html" %}
  10. </div>
  11. <div class="col-lg-6">
  12. {% include "cards/project-progress.html" project-id=2 progress=76 days-ago=7 %}
  13. </div>
  14. <div class="col-md-6 col-xl-3">{% include "cards/user-card.html" person-id=5 %}</div>
  15. <div class="col-md-6 col-xl-3">{% include "cards/user-card.html" person-id=6 %}</div>
  16. <div class="col-md-6 col-xl-3">{% include "cards/user-card.html" person-id=7 right=true %}</div>
  17. <div class="col-md-6 col-xl-3">{% include "cards/user-card.html" person-id=8 right=true %}</div>
  18. <div class="col-md-6 col-xl-3">{% include "cards/user-card-big.html" person-id=15 %}</div>
  19. <div class="col-md-6 col-xl-3">{% include "cards/user-card-big.html" person-id=16 %}</div>
  20. <div class="col-md-6 col-xl-3">{% include "cards/user-card-big.html" person-id=17 %}</div>
  21. <div class="col-md-6 col-xl-3">{% include "cards/user-card-big.html" person-id=18 %}</div>
  22. <div class="col-md-6 col-xl-3">{% include "cards/user-card-bg.html" person-id=25 %}</div>
  23. <div class="col-md-6 col-xl-3">{% include "cards/user-card-bg.html" person-id=26 %}</div>
  24. <div class="col-md-6 col-xl-3">{% include "cards/user-card-bg.html" person-id=27 blurred=true %}</div>
  25. <div class="col-md-6 col-xl-3">{% include "cards/user-card-bg.html" person-id=28 blurred=true %}</div>
  26. <div class="col-md-6">
  27. {% include "cards/subscribe.html" person-id=0 %}
  28. </div>
  29. <div class="col-md-6">
  30. {% include "cards/subscribe.html" person-id=2 %}
  31. </div>
  32. <div class="col-md-6 col-xl-3">
  33. {% include "cards/small-stats.html" id="currency" icon="currency-dollar" color="primary" title="132 Sales" description="12 waiting payments" %}
  34. </div>
  35. <div class="col-md-6 col-xl-3">
  36. {% include "cards/small-stats.html" id="shopping-cart" icon="shopping-cart" color="green" title="78 Orders" description="32 shipped" %}
  37. </div>
  38. <div class="col-md-6 col-xl-3">
  39. {% include "cards/small-stats.html" id="user" icon="user" color="red" title="1352 Members" description="163 registered today" %}
  40. </div>
  41. <div class="col-md-6 col-xl-3">
  42. {% include "cards/small-stats.html" id="message" icon="message" color="yellow" title="132 Comments" description="16 waitings" %}
  43. </div>
  44. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="sales" chart-position="left" chart-type="donut" chart-data="56" color="primary" title="132 Sales" description="12 waiting payments" %}
  45. </div>
  46. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="orders" chart-position="left" chart-type="donut" chart-data="56" color="green" title="78 Orders" description="32 shipped" %}
  47. </div>
  48. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="members" chart-position="left" chart-type="donut" chart-data="56" color="red" title="1352 Members" description="163 registered today" %}
  49. </div>
  50. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="comments" chart-position="left" chart-type="donut" chart-data="56" color="yellow" title="132 Comments" description="16 waitings" %}
  51. </div>
  52. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" lt=true title="$5,256.99" description="Revenue last 30 days" description-value="+4%" %}
  53. </div>
  54. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" lt=true title="342" description="Sales last 30 days" description-value="-4.3%" description-value-color="red" %}
  55. </div>
  56. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="members" icon="arrow-up" color="green" lt=true title="132" description="Customers last 30 days" description-value="+6.8%" %}
  57. </div>
  58. <div class="col-md-6 col-xl-3">{% include "cards/small-stats.html" id="comments" icon="arrow-down" color="red" lt=true title="78" description="Members registered today" description-value="-2%" description-value-color="red" %}
  59. </div>
  60. <div class="col-md-6 col-lg-4">
  61. <div class="row row-cards">
  62. <div class="col-12">{% include "cards/small-stats.html" chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}</div>
  63. <div class="col-12">{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}</div>
  64. <div class="col-12">{% include "cards/small-stats.html" chart-type="bar" chart-data="20,40,20,-10,-30,10,40,60,80,70" color="green" icon="brand-github" %}</div>
  65. <div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=10 %}</div>
  66. <div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="12" person-id=11 %}</div>
  67. <div class="col-12">{% include "cards/small-stats.html" chart-type="donut" chart-data="56" person-id=1 %}</div>
  68. <div class="col-12">{% include "cards/small-stats.html" color="green" person-id=4 %}</div>
  69. <div class="col-12">{% include "cards/small-stats.html" small-icon="trending-down" color="red" person-id=3 %}</div>
  70. <div class="col-12">{% include "cards/code.html" %}</div>
  71. </div>
  72. </div>
  73. <div class="col-md-6 col-lg-4">
  74. <div class="row row-cards">
  75. <div class="col-12">{% include "cards/project-summary.html" stage-color="red" %}</div>
  76. </div>
  77. </div>
  78. <div class="col-md-6 col-lg-4">
  79. <div class="row row-cards">
  80. <div class="col-12">{% include "cards/project-kanban.html" title="Tabler UI" badge="v1.0" value=30 percentage-color="red" limit=4 offset=0 due="72 days" %}</div>
  81. <div class="col-12">{% include "cards/project-kanban.html" title="Tabler React" value=80 offset=20 %}</div>
  82. <div class="col-12">{% include "cards/user-info.html" %}</div>
  83. <div class="col-12">{% include "cards/configuration.html" %}</div>
  84. </div>
  85. </div>
  86. </div>