Menu
Overview
General
ButtonBadgeAvatarBrand lockupLayout
ContainerGrid & RowSurface & text utilitiesApp shellData Display
CardTableStatsBulletsLeadersLogo wallCollapse & DisclosureValue chainFeedback
AlertModalForms
Field & InputLead form & CTA rowNavigation
NavTheming
Product themesData 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
<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.statrowreflows 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.