KpiValue ⚠️ Experimental ​

The KpiValue component can be used imported from:

Playground ​

Construction ​

The CSS component uses a <article> tag with the z-kpi-value HTML custom attribute.

Parameters ​

z-kpi-value ​

The z-kpi-value is the main parameter for the KPI Value component.

123

To add a header to the KPI Value, use the <header> tag.

Header
123
Amount ​

The first value inside the <main> tag of the KPI Value specifies the amount of the KPI. You can use any tag, but it is recommended to use a <span> tag.

123
Difference ​

The next value inside the <main> tag of the KPI Value specifies the difference between the current value and the previous value.

You can use any tag, but it is recommended to use a <span> tag.

Make sure you use the data-difference attribute, if no value is provided, the difference would be positive and presented with a green arrow. In case we want to show a negative difference, we need to provide the negative value using data-difference="negative".

Positive
123
1.2
Negative
123
-1.2
Description ​

Finally you can add an description to the KPI Value, using a <p> tag.

Header
123
1.2

Description of the KPI

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​