Status & feedback / Numbers with meaning
Stat
A figure that answers a question, with a label and any qualification it needs.
Basic usage
844statementsSQL statements analyzed
978findingsA lower bound on findings reached
HTML
<div class="stats">
<div class="stat"><b class="stat-fig">844</b><span class="stat-label">statements</span><span class="stat-note">SQL statements analyzed</span></div>
<div class="stat tone-warn"><b class="stat-fig is-bound">978</b><span class="stat-label">findings</span><span class="stat-note">A lower bound on findings reached</span></div>
</div>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.stats / .stat | A group of figures and an individual statistic. |
.stat-fig / .stat-label / .stat-note | The value, what it measures, and a note. |
.is-bound | Prefixes the value with ≥ to mark a lower bound. |
.stat-delta / .stat-up / .stat-down | The change from a previous result. Explain whether the direction is good. |
Usage notes
Numbers do not wrap. Give a figure enough width instead of making it too small to read.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.