Definition list

.talos-dl lays a <dl> out as a two-column spec sheet: the <dt> terms read as uppercase HUD labels on the left, the <dd> values right-align with tabular figures so a stacked column of numbers lines up to the decimal. Each row carries a hairline rule underneath — the grid is the read order.

Default

<dl class="talos-dl">
  <dt>Node</dt>
  <dd>atlas-01</dd>
  <dt>Region</dt>
  <dd>eu-west-1</dd>
  <dt>Uptime</dt>
  <dd>99.982%</dd>
</dl>

A max-content 1fr grid: terms size to their content, values take the rest and right-align. Values lock to tabular-nums, so numeric columns stay aligned.

Inline

<dl class="talos-dl talos-dl--inline">
  <div><dt>cpu</dt><dd>42%</dd></div>
  <div><dt>mem</dt><dd>6.1/16 GB</dd></div>
  <div><dt>net</dt><dd>118 Mb/s</dd></div>
</dl>

--inline drops the grid and wraps each pair in a flex <div> row: term left, value pushed to the right edge. Use it when you need self-contained rows rather than one aligned column.

Classes