Layout Updated
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
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> <dl class="hss-strip"> <div class="hss-tile"><dt class="lbl">Documents</dt><dd class="fig">1,482</dd><dd class="sub">this period</dd></div> <div class="hss-tile"><dt class="lbl">Median time</dt><dd class="fig">3.2s</dd><dd class="sub">last 24h</dd></div> <div class="hss-tile"><dt class="lbl">Clean runs</dt><dd class="fig">98.4%</dd><dd class="sub">no retries</dd></div> <div class="hss-tile"><dt class="lbl">Quality score</dt><dd class="fig is-missing">—</dd><dd class="sub">not rated yet</dd></div> </dl>
Colors come from shared theme tokens — --surface, --ink, --border, --accent and friends — so this CSS carries no palette of its own. Use Copy 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;
}
@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: 0.9rem 1rem; min-width: 0; }
.hss-tile .lbl { font: 700 0.8125rem/1.3 ui-monospace, monospace; text-transform: uppercase; overflow-wrap: anywhere; }
.hss-tile .fig { 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)); }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 (1, then 2, then 4) instead of auto-fit, so a row never ends with one orphan tile.
Two rules of honesty: render a missing value as a dimmed em dash, never a zero; keep the unit with the number.
In the filter form each tile is a button with aria-pressed, not a tab. Compute every count from the unfiltered set so the numbers never change while filtering.
Arrow keys move between the Preview, HTML, CSS and Prompt tabs. Home and End jump to the first and last.