LayoutUpdated
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.
Added August 21, 2026 · Updated September 28, 2026
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
Three ways to take it
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 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-cap">Reporting only — the figures are the whole job.</p> <div class="hss-strip four"> <div class="hss-tile"><span class="k">Documents</span><span class="v">1,482</span><span class="u">this period</span></div> <div class="hss-tile"><span class="k">Median time</span><span class="v">3.2s</span><span class="u">last 24h</span></div> <div class="hss-tile"><span class="k">Clean runs</span><span class="v">98.4%</span><span class="u">no retries</span></div> <div class="hss-tile"><span class="k">Quality score</span><span class="v missing">—</span><span class="u">not rated yet</span></div> </div> <div class="hss-strip five" data-hss-filter> <button class="hss-tile" data-state="All" aria-pressed="true"><span class="k">All</span><span class="v">6</span><span class="u">downloads</span></button> <!-- one button per state, count computed from the unfiltered set --> </div> <ul class="hss-list" data-hss-list>…</ul> <p class="hss-status" aria-live="polite">Showing all 6 downloads.</p>
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;
gap: 1px; /* the hairline */
background: var(--border); /* shows through the gap */
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
grid-template-columns: minmax(0, 1fr);
}
@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: .85rem 1rem; min-width: 0; }
.hss-tile .k { font: .8125rem/1.3 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.hss-tile .v { display: block; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hss-tile .v.missing { color: var(--dim); font-weight: 400; }
button.hss-tile[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}const strip = document.querySelector('[data-hss-filter]');
const rows = document.querySelectorAll('[data-hss-list] li');
const status = document.querySelector('.hss-status');
strip.addEventListener('click', (event) => {
const tile = event.target.closest('button');
if (!tile) return;
const wasOn = tile.getAttribute('aria-pressed') === 'true';
const active = wasOn ? 'All' : tile.dataset.state;
for (const other of strip.querySelectorAll('button')) {
other.setAttribute('aria-pressed', String(other.dataset.state === active));
}
let shown = 0;
for (const row of rows) {
row.hidden = active !== 'All' && row.dataset.state !== active;
if (!row.hidden) shown += 1;
}
status.textContent = active === 'All'
? 'Showing all 6 downloads.'
: `Filtered to ${active}: ${shown} of 6. Press the lit tile again to clear.`;
});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.
The full prompt continues with: pinning column counts instead of auto-fit; 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.
:root {
--ground:#eef0f3; --surface:#ffffff; --border:#d2d8e0; --ink:#161b22; --dim:#56606e; --accent:#364f6a; --radius:10px;
}
@media (prefers-color-scheme: dark) {
:root { --ground:#10141a; --surface:#191f27; --border:#2c3743; --ink:#e6ecf3; --dim:#97a4b4; --accent:#6f92bd; }
}
.hss-strip {
display: grid;
gap: 1px; /* the hairline */
background: var(--border); /* shows through the gap */
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
grid-template-columns: minmax(0, 1fr);
}
@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: .85rem 1rem; min-width: 0; }
.hss-tile .k { font: .8125rem/1.3 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.hss-tile .v { display: block; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hss-tile .v.missing { color: var(--dim); font-weight: 400; }
button.hss-tile[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
<p class="hss-cap">Reporting only — the figures are the whole job.</p>
<div class="hss-strip four">
<div class="hss-tile"><span class="k">Documents</span><span class="v">1,482</span><span class="u">this period</span></div>
<div class="hss-tile"><span class="k">Median time</span><span class="v">3.2s</span><span class="u">last 24h</span></div>
<div class="hss-tile"><span class="k">Clean runs</span><span class="v">98.4%</span><span class="u">no retries</span></div>
<div class="hss-tile"><span class="k">Quality score</span><span class="v missing">—</span><span class="u">not rated yet</span></div>
</div>
<div class="hss-strip five" data-hss-filter>
<button class="hss-tile" data-state="All" aria-pressed="true"><span class="k">All</span><span class="v">6</span><span class="u">downloads</span></button>
<!-- one button per state, count computed from the unfiltered set -->
</div>
<ul class="hss-list" data-hss-list>…</ul>
<p class="hss-status" aria-live="polite">Showing all 6 downloads.</p>
<script>
const strip = document.querySelector('[data-hss-filter]');
const rows = document.querySelectorAll('[data-hss-list] li');
const status = document.querySelector('.hss-status');
strip.addEventListener('click', (event) => {
const tile = event.target.closest('button');
if (!tile) return;
const wasOn = tile.getAttribute('aria-pressed') === 'true';
const active = wasOn ? 'All' : tile.dataset.state;
for (const other of strip.querySelectorAll('button')) {
other.setAttribute('aria-pressed', String(other.dataset.state === active));
}
let shown = 0;
for (const row of rows) {
row.hidden = active !== 'All' && row.dataset.state !== active;
if (!row.hidden) shown += 1;
}
status.textContent = active === 'All'
? 'Showing all 6 downloads.'
: `Filtered to ${active}: ${shown} of 6. Press the lit tile again to clear.`;
});
</script>
Next to this one
One pattern, fully seen.
Take it, or go back to the list for another.