CSS only · 1.0.0

Stat

KPI/stat tile: label (with icon), a big value, a delta up/down, and an optional trend slot that composes an ng-chart. SCSS-only. The tile is neutral by design — colour goes on the accent (delta + inner chart), not the tile background.

Basic

A tile is .ng-stat > .ng-stat-head (label + optional icon) > .ng-stat-row (.ng-stat-value + .ng-stat-delta). Delta direction via .up / .down.

Revenue

32.8K 18.4%

stat.html

<div class="ng-stat" style="width:230px">
    <div class="ng-stat-head">
        <span class="ng-stat-label">Revenue</span>
        <i class="ph ph-currency-eur text-mute"></i>
    </div>
    <div class="ng-stat-row">
        <span class="ng-stat-value">32.8K</span>
        <span class="ng-stat-delta up"><i class="ph-bold ph-arrow-up"></i> 18.4%</span>
    </div>
</div>

With trend chart

Add a .ng-stat-chart slot and compose any chart inside (here ng-chart-js area/line with data-grid="false"). The chart carries its own JS.

Revenue

32.8K 18.4%

Bounce rate

27.6% 4.1%

stat.html

<div style="display:flex;gap:1.25rem;flex-wrap:wrap">
    <div class="ng-stat" style="width:230px">
        <div class="ng-stat-head"><span class="ng-stat-label">Revenue</span><i class="ph ph-currency-eur text-mute"></i></div>
        <div class="ng-stat-row"><span class="ng-stat-value">32.8K</span><span class="ng-stat-delta up"><i class="ph-bold ph-arrow-up"></i> 18.4%</span></div>
        <div class="ng-stat-chart"><div class="ng-chart-js ng-chart-success" data-chart="area" data-grid="false" style="height:3rem" data-values="4,6,5,8,7,9,8,11"></div></div>
    </div>
    <div class="ng-stat" style="width:230px">
        <div class="ng-stat-head"><span class="ng-stat-label">Bounce rate</span><i class="ph ph-chart-line-down text-mute"></i></div>
        <div class="ng-stat-row"><span class="ng-stat-value">27.6%</span><span class="ng-stat-delta down"><i class="ph-bold ph-arrow-down"></i> 4.1%</span></div>
        <div class="ng-stat-chart"><div class="ng-chart-js ng-chart-danger" data-chart="line" data-grid="false" style="height:3rem" data-values="9,7,8,6,7,5,6,4"></div></div>
    </div>
</div>

Compact

The .compact modifier reduces padding, gap and value size — good for dense dashboards.

Sessions

1.24K 6%

stat.html

<div class="ng-stat compact" style="width:230px">
    <div class="ng-stat-head"><span class="ng-stat-label">Sessions</span></div>
    <div class="ng-stat-row"><span class="ng-stat-value">1.24K</span><span class="ng-stat-delta up"><i class="ph-bold ph-arrow-up"></i> 6%</span></div>
    <div class="ng-stat-chart"><div class="ng-chart-js ng-chart-cyan" data-chart="bar" data-grid="false" style="height:3rem" data-values="4,8,5,9,6,10,7,9"></div></div>
</div>

Anatomy

ng-stat ng-stat-head ng-stat-label ng-stat-row ng-stat-value ng-stat-delta ng-stat-chart

Modifiers

compact ng-stat-delta.up ng-stat-delta.down

Reference

Generated from the component source (_ng_stat.scss).

Component info

Name	`Stat (KPI tile)`
Type	`css`
Version	`1.0.0`
Status	`css`
CSS	`/assets/css/components/_ng_stat.scss`

Classes

.ng-chart- .ng-stat .ng-stat-chart .ng-stat-delta .ng-stat-head .ng-stat-label .ng-stat-row .ng-stat-value

Tokens

--ng-stat-value-size