SECTION

Article furniture

The meta line above a piece of writing and the filed-under row below it. This is the furniture around your prose, not the prose itself.

Meta, byline and foot

Your article goes between the two — see Prose.

WRITING APRIL 2026 12 MIN

Why undo is the hardest feature in any editor

Your Name Design engineer, independent

FILED UNDER — EDITORS, ARCHITECTURE Next: selection models ↗

HTML

<div class="article" style="width:100%">
  <div class="article-meta">
    <span class="article-meta-kind">WRITING</span>
    <span class="article-meta-sep" aria-hidden="true"></span>
    <span>APRIL 2026</span>
    <span class="article-meta-sep" aria-hidden="true"></span>
    <span>12 MIN</span>
  </div>
  <h2 class="prose-lead" style="margin:0; font-family:var(--ds-font-display); font-size:var(--ds-text-h2); color:var(--ds-ink)">Why undo is the hardest feature in any editor</h2>
  <div class="byline">
    <span class="avatar avatar-40">NN</span>
    <div class="byline-text">
      <span class="byline-name">Your Name</span>
      <span class="byline-role">Design engineer, independent</span>
    </div>
  </div>
  <div class="article-foot">
    <span class="article-foot-filed">FILED UNDER — EDITORS, ARCHITECTURE</span>
    <a class="article-foot-next" href="#">Next: selection models ↗</a>
  </div>
</div>

Reference

Read from sections/article.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.article.article-meta.article-meta-kind.article-meta-sep.article-foot.article-foot-filed.article-foot-next

READS--ds-accent--ds-focus-ring--ds-focus-width--ds-font-display--ds-gap-block--ds-gap-loose--ds-hairline--ds-hit-min--ds-ink--ds-ink-faint--ds-measure--ds-meta-sep-w--ds-prose-gap--ds-rule--ds-rule-strong--ds-text-label--ds-text-ui--ds-track-meta--ds-track-subtle--ds-underline-offset

Notes

THE SEPARATORS ARE REAL ELEMENTS

Not a ::before on each item, which would need a :not(:last-child) to avoid a trailing dash — and that rule points at the wrong element the moment the row wraps, because the item ending a wrapped line is not the last item. Real elements survive wrapping because the author put them where they belong.

Mark them aria-hidden, or a screen reader reads three separate facts as one run-on string.

THE FOOT MATCHES THE PROSE MEASURE

It is capped at 70ch like the article above it, so put it inside the same wrapper rather than after it — a rule running the full page width under a 70ch column reads as a section break, not a footer.