Novus Technologies Novus Technologies design kit v0.2.0
Menu

Data Display

Stats

KPI cells that reflow instead of colliding, the canonical stat layout.

.stat · .stat__value · .stat__label · .statrow · .statrow--wide

1M+touchpoints served
120M+transactions / month
99.8%platform uptime
7countries
Stat row (canonical layout)
<div class="statrow statrow--wide">
  <div class="stat"><span class="stat__value">1M+</span><span class="stat__label">touchpoints served</span></div>
  <div class="stat"><span class="stat__value">120M+</span><span class="stat__label">transactions / month</span></div>
  <div class="stat"><span class="stat__value">99.8%</span><span class="stat__label">platform uptime</span></div>
  <div class="stat"><span class="stat__value">7</span><span class="stat__label">countries</span></div>
</div>

Usage

  • Big numbers never collide: the value is nowrap, the cell shrinks (min-width:0), and .statrow reflows to fewer columns instead of overlapping.
  • Abbreviate long figures (1M+, 120M+) rather than letting a column overflow.
  • Status colour on metric boxes signals a judgement (trend, risk), never colour a pure-data figure.