Components

Chips

Compact labeled pills for read-only facts and parameters. A bold value sits beside its label; the ds-chip--warn variant flags an incomplete or invalid state.

Chip row

Group chips in a ds-chips wrapper. Wrap the value in <b> to emphasize it; add ds-chip--warn for the warning tone.

Facts · warning

Overhead 18 %Days 218Incomplete setup

<div class="ds-chips">
  <span class="ds-chip">Overhead <b>18 %</b></span>
  <span class="ds-chip">Days <b>218</b></span>
  <span class="ds-chip ds-chip--warn">Incomplete setup</span>
</div>