Hairline stat strip

A row of stat tiles joined by hairlines that are grid gap, not borders — the container paints the border color and the tiles paint the surface, so separators never double up or break when the row wraps — in a reporting form and in a second form where each tile is the filter for the list beneath it.

Reach for it when building

summary strip at the top of a detail page
dashboard KPI row
account usage overview
report header figures
profile stats band

Tags

stats
css-grid
css-only
hairline
no-assets

Reporting only — the figures are the whole job.

Documents 1,482 this period

Median time 3.2s last 24h

Clean runs 98.4% no retries

Quality score — not rated yet

Same strip, working as the filter. Press a tile to narrow the list; press it again to clear.

Bicycle drivetrain teardownDone
Kiln firing, part threeDownloading
Field recording — marsh at dawnQueued
Lathe restoration, episode 12Done
Sourdough hydration testsFailed
Bookbinding: the long stitchQueued

Showing all 6 downloads.

<p class="hss-caption">Reporting only — the figures are the whole job.</p>
<div class="hss-strip four">
  <div class="hss-tile">
    <span class="hss-label">Documents</span>
    <span class="hss-figure">1,482</span>
    <span class="hss-sub">this period</span>
  </div>
  <div class="hss-tile">
    <span class="hss-label">Median time</span>
    <span class="hss-figure">3.2s</span>
    <span class="hss-sub">last 24h</span>
  </div>
  <div class="hss-tile">
    <span class="hss-label">Clean runs</span>
    <span class="hss-figure">98.4%</span>
    <span class="hss-sub">no retries</span>
  </div>
  <div class="hss-tile">
    <span class="hss-label">Quality score</span>
    <span class="hss-figure missing" aria-label="Not rated">—</span>
    <span class="hss-sub">not rated yet</span>
  </div>
</div>

Colors come from shared theme tokens — --surface, --ink, --border, --accent and friends — so this CSS carries no palette of its own. Use Runnable file to copy the tokens along with it.

.hss-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;                       /* the hairline */
  background: var(--border);      /* shows through the gap */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 21rem) { .hss-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 42rem) { .hss-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hss-tile { background: var(--surface); padding: 14px 16px; min-width: 0; }
.hss-label {
  font: 0.8125rem/1.3 ui-monospace, monospace;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); overflow-wrap: anywhere;
}
.hss-figure { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.hss-figure.missing { color: var(--dim); }

button.hss-tile[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

const tiles = [...document.querySelectorAll('#hss-filter button')];
const rows = [...document.querySelectorAll('#hss-list li')];
tiles.forEach((tile) => tile.addEventListener('click', () => {
  const wasPressed = tile.getAttribute('aria-pressed') === 'true';
  const filter = wasPressed ? 'All' : tile.dataset.filter;
  tiles.forEach((other) => other.setAttribute('aria-pressed', String(other.dataset.filter === filter)));
  rows.forEach((row) => { row.hidden = filter !== 'All' && row.dataset.status !== filter; });
}));

Build a strip of statistic tiles that reads as one joined instrument panel rather than a row of floating cards.

The separators between tiles must not be borders. Make the container a CSS grid with gap: 1px and give the container itself the border color as its background; each tile then paints the surface color on top. The 1px of container showing through the gap is the hairline. This is the entire pattern: real borders double where two tiles meet and leave a stray edge when auto-fit wraps the row, and a gap physically cannot do either.

Pin the column counts. One column, then two from 21rem, then four from 42rem. Never let auto-fit choose, because a lone tile on the last row reads as an error.

Two rules of honesty. Render a missing value as a dimmed em dash, never as zero. Keep units with the number, so “3.2s” is one figure and not a figure plus a label.

The filter form. When each tile filters the list beneath it, make each tile a button with aria-pressed, not a tab. Compute every count from the unfiltered set so the numbers never move while you filter. Pressing the lit tile again clears the filter.

Layout

Hairline stat strip

Adaptive tile mosaic

Benchmark progress bar

Ground-referenced color