Dashboard

KPI tiles in a packing grid, a capacity list with progress bars, and a status cluster — the at-a-glance motif. Column count is entirely intrinsic: the grid packs whatever fits above its minimum tile width.

Composed of: stack · cluster · auto-grid · card · badge · progress

Page source — the whole page is the snippet

html

<main class="stack" data-gap="lg">
  <div class="cluster" data-justify="between">
    <h1>Operations</h1>
    <span class="badge" data-tone="success"><span class="badge-icon"><svg class="icon" aria-hidden="true"><use href="#i-circle-check"/></svg></span>All systems normal</span>
  </div>
  <div class="auto-grid" style="--grid-min: 11rem">
    <div class="card card-body">
      <div class="card-label">Requests</div>
      <div class="card-value">1.2M</div>
      <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-trending-up"/></svg> +8% today</div>
    </div>
    <div class="card card-body">
      <div class="card-label">P95 latency</div>
      <div class="card-value">184ms</div>
      <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-trending-up"/></svg> within budget</div>
    </div>
    <div class="card card-body">
      <div class="card-label">Error rate</div>
      <div class="card-value">0.02%</div>
      <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-circle-check"/></svg> nominal</div>
    </div>
    <div class="card card-body">
      <div class="card-label">Queue depth</div>
      <div class="card-value">37</div>
      <div class="card-delta"><svg class="icon" aria-hidden="true"><use href="#i-triangle-alert"/></svg> draining</div>
    </div>
  </div>
  <div class="stack" data-gap="sm">
    <h2>Capacity</h2>
    <div class="progress" role="progressbar" aria-label="Storage used" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100">
      <div class="progress__bar" style="--progress-value:62%"></div>
    </div>
    <div class="progress" data-tone="success" role="progressbar" aria-label="Compute reserved" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
      <div class="progress__bar" style="--progress-value:38%"></div>
    </div>
  </div>
</main>

Agent Implementation Guidance

The KPI grid's --grid-min is the only tuning knob on the page. The progress bars demonstrate the public custom-property knob (--progress-value) at page scale — inline per-record values, CSS owns the mapping.