tabler/pages/index.html

---
title: Dashboard
page-title: Dashboard
menu: level-1.level-2.level-3.level-4
---

<div class="row row-cards">
   <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card">
         <div class="card-body">
            <div class="d-flex">
               <div>Sales</div>
               <div class="ml-auto">
                  {% include parts/dropdown/days.html %}
               </div>
            </div>
            <div class="h1 mb-3">75%</div>
            <div class="d-flex mb-2">
               <div>Conversion rate</div>
               <div class="ml-auto text-green">
                  24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
               </div>
            </div>
            {% include ui/progress.html percentage=75 color="blue" size="sm" %}
         </div>
      </div>
   </div>
   <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card">
         <div class="card-body">
            <div class="d-flex">
               <div>Revenue</div>
               <div class="ml-auto">
                  {% include parts/dropdown/days.html %}
               </div>
            </div>
            <div class="d-flex align-items-baseline">
               <div class="h1 mb-0 mr-2">$4,300</div>
               <div class="mr-auto text-green">
                  24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
               </div>
            </div>
         </div>
         <div class="card-chart" id="card-chart-1"></div>
         {% include js/charts.html id="card-chart-1" chart-id="revenue-bg" %}
      </div>
   </div>
   <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card">
         <div class="card-body">
            <div class="d-flex">
               <div>New clients</div>
               <div class="ml-auto">
                  {% include parts/dropdown/days.html %}
               </div>
            </div>
            <div class="d-flex align-items-baseline">
               <div class="h1 mb-3 mr-2">6,782</div>
               <div class="mr-auto text-red">
                  5% {% include ui/icon.html icon="trending-down" class="icon-thin" %}
               </div>
            </div>

            <div class="chart-sm" id="chart-active-users"></div>
            {% include js/charts.html id="chart-active-users" chart-id="new-clients" %}
         </div>
      </div>
   </div>

   <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card">
         <div class="card-body">
            <div class="d-flex">
               <div>Active users</div>
               <div class="ml-auto">
                  {% include parts/dropdown/days.html %}
               </div>
            </div>
            <div class="d-flex align-items-baseline">
               <div class="h1 mb-3 mr-2">2,986</div>
               <div class="mr-auto text-green">
                  4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
               </div>
            </div>

            <div class="chart-sm" id="chart-active-users2"></div>
            {% include js/charts.html id="chart-active-users2" chart-id="active-users" %}
         </div>
      </div>
   </div>

   <div class="col-6 col-sm-4 col-xl-2">
      {% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
   </div>
   <div class="col-6 col-sm-4 col-xl-2">
      {% include cards/small-stats-3.html number=17 title="Closed Today" percentage=-3 %}
   </div>
   <div class="col-6 col-sm-4 col-xl-2">
      {% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
   </div>
   <div class="col-6 col-sm-4 col-xl-2">
      {% include cards/small-stats-3.html number="27.3K" title="Followers" percentage=3 %}
   </div>
   <div class="col-6 col-sm-4 col-xl-2">
      {% include cards/small-stats-3.html number="$95" title="Daily Earnings" percentage=-2 %}
   </div>
   <div class="col-6 col-sm-4 col-xl-2">
      {% include cards/small-stats-3.html number=621 title="Products" percentage=-1 %}
   </div>

   {% comment %}
   <div class="col-lg-6">
      {% comment %}{% include cards/development-activity.html %}{% endcomment %}
   </div>

   <div class="col-md-6">
      <div class="alert alert-primary">Are you in trouble? <a href="{{ site.base }}/docs/index.html" class="alert-link">Read our documentation</a> with code samples.</div>

      <div class="row">
         <div class="col-sm-6">
            {% include cards/chart.html height=12 title="Chart title" id="chart-donut" data="donut" %}
         </div>
         <div class="col-sm-6">
            {% include cards/chart.html height=12 title="Chart title" id="chart-pie" data="pie" %}
         </div>
         <div class="col-sm-6">
            {% include cards/digit.html color="red" title="New feedback" digit="62" width="28%" %}
         </div>
         <div class="col-sm-6">
            {% include cards/digit.html color="green" title="Today profit" digit="$652" width="84%" %}
         </div>
      </div>
   </div>
   {% endcomment %}

   <div class="col-sm-6 col-xl-3">
      {% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
   </div>
   <div class="col-sm-6 col-xl-3">
      {% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
   </div>
   <div class="col-sm-6 col-xl-3">
      {% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
   </div>
   <div class="col-sm-6 col-xl-3">
      {% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
   </div>
</div>

{% comment %}
<div class="row row-cards row-deck">
   {% for article in site.data.articles limit: 2 %}
   <div class="col-lg-6">
      {% include cards/blog-single.html article=article type="aside" %}
   </div>
   {% endfor %}
</div>
{% endcomment %}

<div class="row row-cards row-deck">

   {% comment %}
   <div class="col-12">
      {% include cards/table-users.html %}
   </div>

   <div class="col-sm-6 col-lg-4">
      {% include cards/browsers.html %}
   </div>
   <div class="col-sm-6 col-lg-4">
      {% include cards/projects-list.html %}
   </div>
   <div class="col-md-6 col-lg-4">
      {% include cards/members.html %}
   </div>

   <div class="col-md-6 col-lg-12">
      <div class="row">
         <div class="col-sm-6 col-lg-3">
            {% include cards/chart-bg.html id="chart-bg-users-1" %}
         </div>
         <div class="col-sm-6 col-lg-3">
            {% include cards/chart-bg.html id="chart-bg-users-2" offset=60 aggregate=true color="red" rate="-3%" %}
         </div>
         <div class="col-sm-6 col-lg-3">
            {% include cards/chart-bg.html id="chart-bg-users-3" offset=50 color="green" rate="-3%" %}
         </div>
         <div class="col-sm-6 col-lg-3">
            {% include cards/chart-bg.html id="chart-bg-users-4" offset=40 color="yellow" rate="9%" %}
         </div>
      </div>
   </div>

   {% endcomment %}

   <div class="col-12">
      {% include cards/invoices.html %}
   </div>
</div>