Pattern Library · Layout · ‡ Updated

Hairline Stat Strip

Antonin Januska^*

Pattern 15 of 40

Added 21 August 2026 · Updated 28 September 2026

Abstract

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.

Keywords — stats · css-grid · css-only · hairline · no-assets

1Reach for it when building

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

2The pattern, three ways

Preview, source, and the prompt that rebuilds it. Runnable file copies tokens, CSS, HTML, and JavaScript as one file.

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 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.

Figure 1: Live preview, themed to match the page. The five-tile filter row drops to three columns, then two, as its container narrows, so labels like Downloading never overflow their tiles.

<div class="hss-wrap">
  <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">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 is-missing">&mdash;</span><span class="hss-sub">not rated yet</span></div>
  </div>

  <div class="hss-strip is-filter" role="group" aria-label="Filter downloads by status">
    <button class="hss-tile" type="button" data-status="All" aria-pressed="true"><span class="hss-label">All</span><span class="hss-figure">6</span><span class="hss-sub">downloads</span></button>
    <button class="hss-tile" type="button" data-status="Queued" aria-pressed="false"><span class="hss-label">Queued</span><span class="hss-figure">2</span><span class="hss-sub">downloads</span></button>
    <button class="hss-tile" type="button" data-status="Downloading" aria-pressed="false"><span class="hss-label">Downloading</span><span class="hss-figure">1</span><span class="hss-sub">downloads</span></button>
    <button class="hss-tile" type="button" data-status="Done" aria-pressed="false"><span class="hss-label">Done</span><span class="hss-figure">2</span><span class="hss-sub">downloads</span></button>
    <button class="hss-tile" type="button" data-status="Failed" aria-pressed="false"><span class="hss-label">Failed</span><span class="hss-figure">1</span><span class="hss-sub">downloads</span></button>
  </div>
  <ul class="hss-list"><!-- one <li data-status="…"> per download --></ul>
  <p class="hss-status" aria-live="polite">Showing all 6 downloads.</p>
</div>

Remark. 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-wrap { container-type: inline-size; }

/* The hairline is the container showing through a 1px gap. */
.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)); } }
@container (min-width: 32rem) { .hss-strip.is-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 50rem) { .hss-strip.is-filter { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.hss-tile {
  background: var(--surface);
  color: var(--ink);
  padding: 0.8rem 1rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font: inherit;
  text-align: left;
  border: 0;
}
.hss-label {
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  overflow-wrap: anywhere;
}
.hss-figure { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hss-figure.is-missing { color: var(--dim); font-weight: 400; }
.hss-sub { font-size: 0.9375rem; color: var(--dim); }

button.hss-tile { cursor: pointer; }
button.hss-tile[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: inset 0 -3px 0 var(--accent);
}
button.hss-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

:root {
  --ground: #eef0f3; --surface: #ffffff; --surface-2: #f5f7f9; --border: #d2d8e0;
  --ink: #161b22; --dim: #56606e; --accent: #364f6a; --signal: #a65210;
  --ok: #1c6e52; --warn: #7e610f; --bad: #a03227; --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #10141a; --surface: #191f27; --surface-2: #202834; --border: #2c3743;
    --ink: #e6ecf3; --dim: #97a4b4; --accent: #6f92bd; --signal: #e39a4a;
    --ok: #4fbe93; --warn: #ddb44a; --bad: #ee8579;
  }
}

const tiles = document.querySelectorAll('.hss-strip.is-filter button');
const items = document.querySelectorAll('.hss-list li');
const status = document.querySelector('.hss-status');

tiles.forEach((tile) => {
  tile.addEventListener('click', () => {
    const wasOn = tile.getAttribute('aria-pressed') === 'true';
    const filter = wasOn || tile.dataset.status === 'All' ? 'All' : tile.dataset.status;

    tiles.forEach((other) => other.setAttribute('aria-pressed', String(other.dataset.status === filter)));

    let shown = 0;
    items.forEach((item) => {
      item.hidden = filter !== 'All' && item.dataset.status !== filter;
      if (!item.hidden) shown += 1;
    });

    // Counts on the tiles come from the unfiltered set, so they never change here.
    status.textContent = filter === 'All'
      ? `Showing all ${items.length} downloads.`
      : `Filtered to ${filter}: ${shown} of ${items.length}. 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 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.]

3Why a gap and not a border

Proposition 1. Real borders double where two tiles meet and leave a stray edge when auto-fit wraps the row; a gap physically cannot do either.

Figure 2: The shared edge. (a) Two bordered tiles stack their edges into a double line. (b) The container paints the border color, and one pixel of it shows through the gap between tiles.

[1]Section rail. Interaction. Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.
[2]Ground-referenced color. Color. Colors solved against the page's own ground token so they invert correctly between themes.
[3]Single-property color variants. Color. One custom property carries the hue; border, fill, spine and dot derive from it.

Abstract

1Reach for it when building

2The pattern, three ways

3Why a gap and not a border

Related patterns