Components
Metrics
Stat rows pairing a label with a tabular value, separated by hairlines. Use --hero for the headline figure, --sub for an indented secondary line, and .is-pos / .is-neg to color the value.
Metric rows
The same .ds-metric rows are used inside the status panel body. Here they sit in a plain bordered box.
Margin38 %
Margin / day€342
Salary cost€420
Loss−4 %
<div class="ds-metric ds-metric--hero"><span class="ds-metric__k">Margin</span><span class="ds-metric__v is-pos">38 %</span></div>
<div class="ds-metric"><span class="ds-metric__k">Margin / day</span><span class="ds-metric__v">€342</span></div>
<div class="ds-metric ds-metric--sub"><span class="ds-metric__k">Salary cost</span><span class="ds-metric__v">€420</span></div>
<div class="ds-metric"><span class="ds-metric__k">Loss</span><span class="ds-metric__v is-neg">−4 %</span></div>