Data cards

Focuses on visually representing one stream of data.

Anatomy

Title
Amount
Graph

Example

Coded example

Sales

$3,547.50

Transactions

150

Residuals

$147.17

Tickets

Code snippet

									

<div class="card data-card mb-48">
  <div class="card-content">
    <div class="data-card-text">
      <h5>Sales</h5>
      <div class="card-count tertiary">$3,547.50</div>
    </div>
    <div class="card-body">
      <div id="chart" class="chart-area"></div>
    </div>
  </div>
  <div class="card-spinner">
    <img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
  </div>
</div>

<div class="card data-card mb-48">
  <div class="card-content">
    <div class="data-card-text">
      <h5>Transactions</h5>
      <div class="card-count primary">150</div>
    </div>
    <div class="card-body">
      <div id="chart2" class="chart-area"></div>
    </div>
  </div>
  <div class="card-spinner">
    <img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
  </div>
</div>

<div class="card data-card mb-48">
  <div class="card-content">
    <div class="data-card-text">
      <h5>Residuals</h5>
      <div class="card-count green">$147.17</div>
    </div>
    <div class="card-body">
      <div id="chart3" class="chart-area"></div>
    </div>
  </div>
  <div class="card-spinner">
    <img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
  </div>
</div>

<div class="card data-card mb-48">
  <div class="card-content">
    <div class="data-card-text">
      <h5>Tickets</h5>
      <div class="card-count amber">12</div>
    </div>
    <div class="card-body">
      <div id="chart4" class="chart-area"></div>
    </div>
  </div>
  <div class="card-spinner">
    <img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
  </div>
</div>

<!-- Include link to script below to call ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

									
var options = {
      series: [{
      name: 'series1',
      data: [31, 40, 28, 51, 42, 109, 100]
    }],
      chart: {
      height: 170,
      width: '100%',
      type: 'area',
      sparkline: {
        enabled: false,
      },
      toolbar:{
        tools: {
          download: false,
          reset: false,
          zoom: false,
          zoomin: false,
          zoomout: false,
          pan: false
        },
      },
    },
    grid:{
      show: false
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth'
    },
    xaxis: {
      axisTicks:{
        show: false
      },
      axisBorder:{
        show:false
      },
      labels:{
        show:false
      },
      type: 'datetime',
      categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
    },
    yaxis:{
      axisTicks:{
        show: false
      },
      axisBorder:{
        show:false
      },
      labels:{
        show:false
      }
    },
    tooltip: {
      enabled: false
    },
    colors: ['#7B61FF']
    };

    var options2 = {
          series: [{
          name: 'series1',
          data: [110, 98, 74, 88, 93, 99, 140]
        }],
          chart: {
          height: 170,
          width: '100%',
          type: 'area',
          sparkline: {
            enabled: false,
          },
          toolbar:{
            tools: {
              download: false,
              reset: false,
              zoom: false,
              zoomin: false,
              zoomout: false,
              pan: false
            },
          },
        },
        grid:{
          show: false
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth'
        },
        xaxis: {
          axisTicks:{
            show: false
          },
          axisBorder:{
            show:false
          },
          labels:{
            show:false
          },
          type: 'datetime',
          categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },
        yaxis:{
          axisTicks:{
            show: false
          },
          axisBorder:{
            show:false
          },
          labels:{
            show:false
          }
        },
        tooltip: {
          enabled: false
        },
        colors: ['#F65F18']
        };

        var options3 = {
              series: [{
              name: 'series1',
              data: [78, 44, 58, 68, 120, 100, 136]
            }],
              chart: {
              height: 170,
              width: '100%',
              type: 'area',
              sparkline: {
                enabled: false,
              },
              toolbar:{
                tools: {
                  download: false,
                  reset: false,
                  zoom: false,
                  zoomin: false,
                  zoomout: false,
                  pan: false
                },
              },
            },
            grid:{
              show: false
            },
            dataLabels: {
              enabled: false
            },
            stroke: {
              curve: 'smooth'
            },
            xaxis: {
              axisTicks:{
                show: false
              },
              axisBorder:{
                show:false
              },
              labels:{
                show:false
              },
              type: 'datetime',
              categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
            },
            yaxis:{
              axisTicks:{
                show: false
              },
              axisBorder:{
                show:false
              },
              labels:{
                show:false
              }
            },
            tooltip: {
              enabled: false
            },
            colors: ['#19A070']
            };

            var options4 = {
                  series: [{
                  name: 'series1',
                  data: [12, 9, 12, 2, 8, 10, 12]
                }],
                  chart: {
                  height: 170,
                  width: '100%',
                  type: 'area',
                  sparkline: {
                    enabled: false,
                  },
                  toolbar:{
                    tools: {
                      download: false,
                      reset: false,
                      zoom: false,
                      zoomin: false,
                      zoomout: false,
                      pan: false
                    },
                  },
                },
                grid:{
                  show: false
                },
                dataLabels: {
                  enabled: false
                },
                stroke: {
                  curve: 'smooth'
                },
                xaxis: {
                  axisTicks:{
                    show: false
                  },
                  axisBorder:{
                    show:false
                  },
                  labels:{
                    show:false
                  },
                  type: 'datetime',
                  categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
                },
                yaxis:{
                  axisTicks:{
                    show: false
                  },
                  axisBorder:{
                    show:false
                  },
                  labels:{
                    show:false
                  }
                },
                tooltip: {
                  enabled: false
                },
                colors: ['#FFA41B']
                };


    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
    var chart = new ApexCharts(document.querySelector("#chart2"), options2);
    chart.render();
    var chart = new ApexCharts(document.querySelector("#chart3"), options3);
    chart.render();
    var chart = new ApexCharts(document.querySelector("#chart4"), options4);
    chart.render();

Figma prototype

Usage guide

Dos and don'ts

Once piece of data.

To showcase key metrics.

One string of data per card.

Use a meaningful title for the card to provide context.

Show more than one string of data.

Forget a title.