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>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>