tabler/pages/cards-stats.html

---
title: Cards stats
layout: default
---

<div class="row">
   <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-sm-6 col-md-4 col-lg-3">
      <div class="card">
         <div class="card-body">
            <div class="d-flex">
               <div>Goals</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">298</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-goals"></div>
            {% include js/charts.html id="chart-goals" chart-id="goals" %}
         </div>
      </div>
   </div>
   <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card">
         <div class="card-body">
            <div>Traffic monitor</div>
            <div class="row">
               <div class="col-6">
                  <div class="text-label">Inbound</div>
                  <div class="h3">45GB</div>
                  <div class="chart-sm" id="chart-traffic-in"></div>
                  {% include js/charts.html id="chart-traffic-in" chart-id="traffic-in" %}
               </div>
               <div class="col-6">
                  <div class="text-label">Outbound</div>
                  <div class="h3">16GB</div>
                  <div class="chart-sm" id="chart-traffic-out"></div>
                  {% include js/charts.html id="chart-traffic-out" chart-id="traffic-out" %}
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="card">
         <div class="card-body">
            <div>Traffic monitor</div>
            <div class="row">
               <div class="col-6 align-self-end">
                  Desktop<br />
                  Mobile<br/>
                  Tablet
               </div>
               <div class="col-6">
                  <div class="chart-square" id="chart-devices"></div>
                  {% include js/charts.html id="chart-devices" chart-id="devices" %}
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-sm-12 col-lg-6">
      <div class="card">
         <div class="card-body">
            <div class="d-flex">
               <div>USD/EUR</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">298</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-usd-eur" style="height: 10rem"></div>
            {% include js/charts.html id="chart-usd-eur" chart-id="usd-eur" %}
         </div>
      </div>
   </div>
   <div class="col-sm-6 col-md-4 col-lg-3">6</div>
   <div class="col-sm-6 col-md-4 col-lg-3">7</div>
   <div class="col-sm-6 col-md-4 col-lg-3">8</div>
</div>