Layout · Updated · Added 2026-08-21 · Updated 2026-09-28
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
This page, in reading order
§ 1
Preview
Rendered live inside the column, so you are seeing it at 36rem: the width a sidebar or card column would give it. It follows the page theme.
Reporting only — the figures are the whole job.
Same strip, working as the filter. Press a tile to narrow the list; press it again to clear.
- Bicycle drivetrain teardown Done
- Kiln firing, part three Downloading
- Field recording — marsh at dawn Queued
- Lathe restoration, episode 12 Done
- Sourdough hydration tests Failed
- Bookbinding: the long stitch Queued
Showing all 6 downloads.
Five tiles never divide evenly, so "All" takes the full first row and the four states share the row beneath it. No empty cell exposes the container colour, and no label overflows its tile.
§ 2
Source
CSS
.hss-strip {
display: grid;
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
grid-template-columns: 1fr;
}
@container (min-width: 21rem) {
.hss-strip { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 42rem) {
.hss-strip { grid-template-columns: repeat(4, 1fr); }
}
.hss-tile { background: var(--surface); padding: .8rem .9rem; }
.hss-label {
font: .8125rem/1.3 ui-monospace, monospace;
text-transform: uppercase;
color: var(--dim);
}
.hss-figure {
font-size: 1.6rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.hss-tile[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}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.
HTML
<div class="hss-strip">
<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">Quality score</span>
<span class="hss-figure is-empty">—</span>
<span class="hss-sub">not rated yet</span>
</div>
</div>JavaScript (filter form only)
tiles.forEach((tile) => tile.addEventListener('click', () => {
const wasPressed = tile.getAttribute('aria-pressed') === 'true'
const chosen = wasPressed ? 'All' : tile.dataset.state
tiles.forEach((other) =>
other.setAttribute('aria-pressed', String(other.dataset.state === chosen)))
rows.forEach((row) => {
row.hidden = chosen !== 'All' && row.dataset.state !== chosen
})
}))§ 3
Prompt
Paste this into Claude Code, Cursor, or any coding agent.
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.
ExcerptThe full prompt continues with sections on pinning column counts, tile anatomy, two rules of honesty (render a missing value as a dimmed em dash; keep units with the number), the filter form, computing counts from the unfiltered set, and using aria-pressed rather than tab roles.