Sheet 02.12 / Components · Content

ArticleRow

One article in a list: the month in a gutter, the title, a two-line description and the reading time. The whole row is the link; hover washes it in hover and underlines the title.

CLASSb-listDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — articlerowlive, on a 768 rail

notes / list

Oct 2026Hairlines Instead of Shadows
Why every edge on the sheet is a 1px line, and what a shadow would have to earn to come back.
6 min
Oct 2026One Spot of Yellow
Rationing a single accent colour across a whole site, one screen at a time.
4 min

Anatomy

Parts

Part	Class	Notes
List	`.b-list`	Rows split by hairlines.
Row	`.b-article-row`	Month gutter and body; the month moves above the title on phones.
Time	`.b-read`	Reading time in mono.

Markup

Code

bundle.css

<div class="b-sheet">
  <ul class="b-list">
    <li><a class="b-article-row b-pad" href="#a"><span class="b-meta">Oct 2026</span><span><span class="b-subtitle">Hairlines Instead of Shadows</span><p>Why every edge on the sheet is a 1px line, and what a shadow would have to earn to come back.</p><span class="b-meta b-read">6 min</span></span></a></li>
    <li><a class="b-article-row b-pad" href="#b"><span class="b-meta">Oct 2026</span><span><span class="b-subtitle">One Spot of Yellow</span><p>Rationing a single accent colour across a whole site, one screen at a time.</p><span class="b-meta b-read">4 min</span></span></a></li>
  </ul>
</div>

Clamp the description to two lines.
Sort newest first.

Don't

Add thumbnails.
Nest a second link inside the row.