Statistic - Tocas UI

Example

Theme

Auto

Light

Dark

Scale

Medium

Large

Medium

Small

8,964

<div class="ts-statistic">
    <div class="value">8,964</div>
    <div class="comparison is-increased">32</div>
</div>

Structure

Value

A value is the main number to be displayed.

19,293

<div class="ts-statistic">
    <div class="value">19,293</div>
</div>

Comparison

A comparison is a number that indicates the change of the value.

42,689

195

1,998

<div class="ts-statistic">
    <div class="value">42,689</div>
    <div class="comparison is-increased">195</div>
</div>
<div class="ts-statistic">
    <div class="value">1,998</div>
    <div class="comparison is-decreased">13</div>
</div>

Unit

A unit is a text that describes the value.

10,000

days

<div class="ts-statistic">
    <div class="value">10,000</div>
    <div class="unit">days</div>
</div>

Icon

A statistic can have an icon.

30,000

<div class="ts-statistic">
    <span class="ts-icon is-eye-icon"></span>
    <div class="value">30,000</div>
</div>

Compositions

Label Text

A statistic can have a label on top or bottom.

Downloads

10,000

times

<div class="ts-text is-label">Downloads</div>
<div class="ts-statistic">
    <div class="value">10,000</div>
    <div class="unit">times</div>
</div>