← All patterns
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.
Reporting only — the figures are the whole job.
Documents1,482this period
Median time3.2slast 24h
Clean runs98.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 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.
<p class="cap">Reporting only — the figures are the whole job.</p> <div class="hss-strip"> <div class="hss-tile"><span class="l">Documents</span><span class="f">1,482</span><span class="u">this period</span></div> <div class="hss-tile"><span class="l">Median time</span><span class="f">3.2s</span><span class="u">last 24h</span></div> <div class="hss-tile"><span class="l">Clean runs</span><span class="f">98.4%</span><span class="u">no retries</span></div> <div class="hss-tile"><span class="l">Quality score</span><span class="f"><span class="dim">—</span></span><span class="u">not rated yet</span></div> </div> <p class="cap">Same strip, working as the filter. Press a tile to narrow the list; press it again to clear.</p> <div class="hss-strip five"> <button class="hss-tile" type="button" data-status="all" data-label="All" aria-pressed="false"><span class="l">All</span><span class="f">6</span><span class="u">downloads</span></button> <button class="hss-tile" type="button" data-status="queued" data-label="Queued" aria-pressed="false"><span class="l">Queued</span><span class="f">2</span><span class="u">downloads</span></button> <button class="hss-tile" type="button" data-status="downloading" data-label="Downloading" aria-pressed="false"><span class="l">Downloading</span><span class="f">1</span><span class="u">downloads</span></button> <button class="hss-tile" type="button" data-status="done" data-label="Done" aria-pressed="false"><span class="l">Done</span><span class="f">2</span><span class="u">downloads</span></button> <button class="hss-tile" type="button" data-status="failed" data-label="Failed" aria-pressed="false"><span class="l">Failed</span><span class="f">1</span><span class="u">downloads</span></button> </div> <ul class="hss-list"> <li data-status="done">Bicycle drivetrain teardown <span class="st">■ Done</span></li> <li data-status="downloading">Kiln firing, part three <span class="st">▲ Downloading</span></li> <li data-status="queued">Field recording — marsh at dawn <span class="st">● Queued</span></li> <li data-status="done">Lathe restoration, episode 12 <span class="st">■ Done</span></li> <li data-status="failed">Sourdough hydration tests <span class="st">✕ Failed</span></li> <li data-status="queued">Bookbinding: the long stitch <span class="st">● Queued</span></li> </ul> <p class="hss-status" id="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;
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, minmax(0, 1fr)); } }
@container (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 .l { font: 500 .8125rem/1.3 ui-monospace, monospace; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; }
.hss-tile .f { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
button.hss-tile[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
const tiles = document.querySelectorAll('button.hss-tile');
const items = document.querySelectorAll('.hss-list li');
const status = document.getElementById('hss-status');
tiles.forEach((tile) => {
tile.addEventListener('click', () => {
const wasPressed = tile.getAttribute('aria-pressed') === 'true';
tiles.forEach((other) => other.setAttribute('aria-pressed', 'false'));
const chosen = wasPressed ? 'all' : tile.dataset.status;
if (!wasPressed && chosen !== 'all') tile.setAttribute('aria-pressed', 'true');
let shown = 0;
items.forEach((item) => {
item.hidden = chosen !== 'all' && item.dataset.status !== chosen;
if (!item.hidden) shown += 1;
});
status.textContent = chosen === 'all'
? 'Showing all 6 downloads.'
: `Filtered to ${tile.dataset.label}: ${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.
Pin the column counts
Pin the column count at each container width — one column, then two from 21rem, then four from 42rem — rather than letting auto-fit choose. An auto-fit row can strand a single tile on its own line, and the strip stops reading as one instrument.
Tile anatomy
Each tile carries a monospace uppercase label, a large bold figure in tabular numerals, and a short unit line beneath it. Labels may wrap; figures may not.
Two rules of honesty
Render a missing value as a dimmed em dash, never as zero. Keep the unit with the number, so a reader never has to guess what 3.2 is measured in.
The filter form
When each tile is also the filter for the list beneath it, compute every count from the unfiltered set, so the numbers do not collapse as the reader narrows the list. Use aria-pressed on real buttons, not tab roles: this is a toggle over one list, not a switch between panels.
<style>:root { --ground:#eef0f3; --surface:#ffffff; --border:#d2d8e0; --ink:#161b22; --dim:#56606e; --accent:#364f6a; --radius:10px; }
.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, minmax(0, 1fr)); } }
@container (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 .l { font: 500 .8125rem/1.3 ui-monospace, monospace; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; }
.hss-tile .f { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
button.hss-tile[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}</style>
<p class="cap">Reporting only — the figures are the whole job.</p>
<div class="hss-strip">
<div class="hss-tile"><span class="l">Documents</span><span class="f">1,482</span><span class="u">this period</span></div>
<div class="hss-tile"><span class="l">Median time</span><span class="f">3.2s</span><span class="u">last 24h</span></div>
<div class="hss-tile"><span class="l">Clean runs</span><span class="f">98.4%</span><span class="u">no retries</span></div>
<div class="hss-tile"><span class="l">Quality score</span><span class="f"><span class="dim">—</span></span><span class="u">not rated yet</span></div>
</div>
<p class="cap">Same strip, working as the filter. Press a tile to narrow the list; press it again to clear.</p>
<div class="hss-strip five">
<button class="hss-tile" type="button" data-status="all" data-label="All" aria-pressed="false"><span class="l">All</span><span class="f">6</span><span class="u">downloads</span></button>
<button class="hss-tile" type="button" data-status="queued" data-label="Queued" aria-pressed="false"><span class="l">Queued</span><span class="f">2</span><span class="u">downloads</span></button>
<button class="hss-tile" type="button" data-status="downloading" data-label="Downloading" aria-pressed="false"><span class="l">Downloading</span><span class="f">1</span><span class="u">downloads</span></button>
<button class="hss-tile" type="button" data-status="done" data-label="Done" aria-pressed="false"><span class="l">Done</span><span class="f">2</span><span class="u">downloads</span></button>
<button class="hss-tile" type="button" data-status="failed" data-label="Failed" aria-pressed="false"><span class="l">Failed</span><span class="f">1</span><span class="u">downloads</span></button>
</div>
<ul class="hss-list">
<li data-status="done">Bicycle drivetrain teardown <span class="st">■ Done</span></li>
<li data-status="downloading">Kiln firing, part three <span class="st">▲ Downloading</span></li>
<li data-status="queued">Field recording — marsh at dawn <span class="st">● Queued</span></li>
<li data-status="done">Lathe restoration, episode 12 <span class="st">■ Done</span></li>
<li data-status="failed">Sourdough hydration tests <span class="st">✕ Failed</span></li>
<li data-status="queued">Bookbinding: the long stitch <span class="st">● Queued</span></li>
</ul>
<p class="hss-status" id="hss-status" aria-live="polite">Showing all 6 downloads.</p>
<script>const tiles = document.querySelectorAll('button.hss-tile');
const items = document.querySelectorAll('.hss-list li');
const status = document.getElementById('hss-status');
tiles.forEach((tile) => {
tile.addEventListener('click', () => {
const wasPressed = tile.getAttribute('aria-pressed') === 'true';
tiles.forEach((other) => other.setAttribute('aria-pressed', 'false'));
const chosen = wasPressed ? 'all' : tile.dataset.status;
if (!wasPressed && chosen !== 'all') tile.setAttribute('aria-pressed', 'true');
let shown = 0;
items.forEach((item) => {
item.hidden = chosen !== 'all' && item.dataset.status !== chosen;
if (!item.hidden) shown += 1;
});
status.textContent = chosen === 'all'
? 'Showing all 6 downloads.'
: `Filtered to ${tile.dataset.label}: ${shown} of 6. Press the lit tile again to clear.`;
});
});</script>