Data display
Sequence shape strip
A whole back-and-forth sequence compressed into a row of small marks — filled for one party, hollow for the other, a ring for a branch — with an honest "+N" tail instead of pretending the sequence ends at the mark limit.
Reach for it when building
- thread previews in an inbox list
- comment activity in listing rows
- series progress at a glance
- review back-and-forth summaries
- conversation shape in search results
- sparkline
- css-only
- tooltip
- truncation
- no-assets
<div class="sss-wrap">
<div class="sss-strip" title="14 exchanges drawn in order; 6 more not drawn. Filled marks are yours, hollow marks are theirs; the ringed mark is a branch with two replies.">
<i class="sss-mark"></i><i class="sss-mark sss-hollow"></i><i class="sss-mark sss-hollow"></i><i class="sss-mark"></i><i class="sss-mark sss-branch"></i><i class="sss-mark sss-hollow"></i><i class="sss-mark"></i><i class="sss-mark"></i><i class="sss-mark sss-hollow"></i><i class="sss-mark"></i><i class="sss-mark sss-hollow"></i><i class="sss-mark sss-hollow"></i><i class="sss-mark"></i><i class="sss-mark sss-hollow"></i>
<span class="sss-more">+6</span>
</div>
<div class="sss-legend">
<span><i class="sss-mark"></i> yours</span>
<span><i class="sss-mark sss-hollow"></i> theirs</span>
<span><i class="sss-mark sss-branch"></i> branch</span>
</div>
</div>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.
.sss-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.sss-strip {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: help;
width: fit-content;
}
.sss-mark {
display: inline-block;
width: 8px;
height: 20px;
border-radius: 2px;
background: var(--accent);
}
/* Hollow = the other party: fill drops to a tint and the identity moves to
the border, so the two states differ in structure, not just hue. */
.sss-hollow {
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
border: 2px solid var(--accent);
width: 4px;
height: 16px;
}
.sss-branch { box-shadow: 0 0 0 2px var(--signal); }
.sss-more {
font-size: 0.875rem;
color: var(--dim);
margin-left: 0.35rem;
font-variant-numeric: tabular-nums;
}
.sss-legend {
display: flex;
gap: 1.25rem;
font-size: 0.9375rem;
color: var(--dim);
align-items: center;
}
.sss-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }Paste this into an agent to rebuild the pattern from scratch.
Build a sparkline that compresses a whole two-party sequence — a message thread, a review exchange, a series of turns — into a single row of small vertical marks, one mark per item in order.
Encode with structure, not color alone: one party's marks are filled solid in the accent; the other party's are hollow — the fill drops to a 12% tint and the accent moves to a 2px border, with the mark slightly narrower so the difference survives even in monochrome. An item with special structure (a branch, a fork, a flagged turn) keeps its fill and gains a ring drawn with `box-shadow: 0 0 0 2px` in the signal color, which costs no layout.
Past a mark limit, stop drawing and append a dimmed "+N" counter in tabular figures rather than silently truncating — a strip that just ends asserts the sequence ended there, which is a false statement made by omission.
The accessibility story is prose, not ARIA gymnastics: put the whole narration in a `title` tooltip on the strip ("14 exchanges drawn in order; 6 more not drawn; filled marks are yours…") and set `cursor: help` as the affordance that a narration exists. Ship a small legend beneath that reuses the identical mark classes — a legend built from different elements drifts out of sync with the real marks the first time someone restyles them.
Build it as flexbox with a 4px gap; the marks are empty inline elements, so the whole pattern is a dozen lines of CSS and renders anywhere including inside a table row.
Every color comes from theme custom properties, and the hollow-vs-filled distinction has to stay readable in both light and dark themes.