Key Performance Indicator

Measure used to evaluate the success of an organization, employee, etc.

How To

  1. Step 1: Click here to download KPIs.cssClick here to download KPIs.css
  2. Step 2: Include Icon Support Files in Logi Info ApplicationInclude Icon Support Files in Logi Info Application

KPI Theme Options

Measurable value that demonstrates how effectively a company is achieving key business objectives.

Common themes
  • .kpi-primary
  • .kpi-success
  • .kpi-info
  • .kpi-warning
  • .kpi-danger
Other background utilities and contextual variations.
  • .kpi-teal
  • .kpi-green
  • .kpi-lime
  • .kpi-blue
  • .kpi-purple
  • .kpi-indigo
  • .kpi-brown
Info Example
Key performance indicator
.kpi-success
KPI Footer
Key performance indicator
.kpi-warning
KPI Footer
Key performance indicator
.kpi-danger
KPI Footer 
<Division Class="info-kpi kpi-success" HtmlDiv="True">
  <Division Class="kpi-icon" HtmlDiv="True">
    <Label Class="ti-layout-placeholder" HtmlTag="i" />
  </Division>
  <Division Class="kpi-heading" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="kpi-body" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="kpi-footer" HtmlDiv="True">
    <Label Caption="..." />
    <Label Class="ti ti-arrow-up" HtmlTag="i" />
  </Division>
</Division>
<Division Class="info-kpi kpi-success" HtmlDiv="True"> <Division Class="kpi-icon" HtmlDiv="True"> <Label Class="ti-layout-placeholder" HtmlTag="i" /> </Division> <Division Class="kpi-heading" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="kpi-body" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="kpi-footer" HtmlDiv="True"> <Label Caption="..." /> <Label Class="ti ti-arrow-up" HtmlTag="i" /> </Division> </Division>
Background
Key performance indicator
.info-kpi-alt .kpi-success
KPI Footer
Key performance indicator
.info-kpi-alt .kpi-warning
KPI Footer
Key performance indicator
.info-kpi-alt .kpi-danger
KPI Footer 
<Division Class="info-kpi info-kpi-alt kpi-success" HtmlDiv="True">
  <Division Class="kpi-icon" HtmlDiv="True">
    <Label Class="ti-layout-placeholder" HtmlTag="i" />
  </Division>
  <Division Class="kpi-heading" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="kpi-body" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="kpi-footer" HtmlDiv="True">
    <Label Caption="..." />
    <Label Class="ti ti-arrow-up" HtmlTag="i" />
  </Division>
</Division>
<Division Class="info-kpi info-kpi-alt kpi-success" HtmlDiv="True"> <Division Class="kpi-icon" HtmlDiv="True"> <Label Class="ti-layout-placeholder" HtmlTag="i" /> </Division> <Division Class="kpi-heading" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="kpi-body" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="kpi-footer" HtmlDiv="True"> <Label Caption="..." /> <Label Class="ti ti-arrow-up" HtmlTag="i" /> </Division> </Division>
Target
.kpi-alt .kpi-success
163Actual
121Target
Ticket Resolution
134.71%
.kpi-alt .kpi-warning
37Actual
39Target
Ticket Resolution
94.87%
.kpi-alt .kpi-danger
23Actual
49Target
Ticket Resolution
5.31%
<Division Class="kpi-alt kpi-success" HtmlDiv="True">
  <Division Class="kpi-heading" HtmlDiv="True">
    <Label Caption="..." />
  </Division>
  <Division Class="row" HtmlDiv="True">
    <Division Class="col col-6 kpi-counter" HtmlDiv="True">
      <Label Caption="..." />
      <Label Caption="Actual" HtmlTag="Small" />
    </Division>
    <Division Class="col col-6 kpi-target" HtmlDiv="True">
      <Label Caption="..." />
      <Label Caption="Target" HtmlTag="Small" />
    </Division>
  </Division>
  <Division Class="row" HtmlDiv="True">
    <Division HtmlDiv="True" Class="col-8 kpi-unit">
      <Label Caption="..." />
    </Division>
    <Division Class="col-4 kpi-percent" HtmlDiv="True">
      <Label Caption="..." Format="##.##\%" />
    </Division>
  </Division>
  <Division Class="progress" HtmlDiv="True">
    <Division Class="progress-bar" HtmlDiv="True" Style="width: 100%;" />
  </Division>
</Division>
<Division Class="kpi-alt kpi-success" HtmlDiv="True"> <Division Class="kpi-heading" HtmlDiv="True"> <Label Caption="..." /> </Division> <Division Class="row" HtmlDiv="True"> <Division Class="col col-6 kpi-counter" HtmlDiv="True"> <Label Caption="..." /> <Label Caption="Actual" HtmlTag="Small" /> </Division> <Division Class="col col-6 kpi-target" HtmlDiv="True"> <Label Caption="..." /> <Label Caption="Target" HtmlTag="Small" /> </Division> </Division> <Division Class="row" HtmlDiv="True"> <Label Caption="..." Class="col-8 kpi-unit" HtmlTag="Div" /> <Label Caption="134.71" Class="col-4 kpi-percent" Format="##.##\%" HtmlTag="Div" /> </Division> <Division Class="progress" HtmlDiv="True"> <Division Class="progress-bar bg-success" HtmlDiv="True" Style="width: 100%;" /> </Division> </Division>