PRIMITIVE

Section head

A numbered kicker, a hairline that eats the slack, and an optional note hard right. The design this came from has fifteen of them, each written out by hand.

Numbered, with a note

The rule is a real element and not a border, because it sits between two pieces of text sharing a baseline. A border would run underneath them instead of between them.

01 — SELECTED WORK 2021 — 2026

HTML

<div class="section-head" style="width:100%">
  <span class="section-head-kicker">01 — SELECTED WORK</span>
  <span class="section-head-rule"></span>
  <span class="section-head-note">2021 — 2026</span>
</div>

The block form: a band's own header

Same kicker, same note, two columns and a full-size title. There is no rule in it on purpose — the title is what fills the line, so a hairline eating the slack would be a second thing doing the first thing's job.

HOW IT WORKS

Flat drawing in. Solid model out. Both, live.

There is no export step between drawing and seeing. The geometry recomputes while the brush is still down.

HTML

<div class="section-head section-head-block" style="width:100%">
  <div class="section-head-main">
    <span class="section-head-kicker">HOW IT WORKS</span>
    <h2 class="section-head-title">Flat drawing in. Solid model out. Both, live.</h2>
  </div>
  <p class="section-head-lede">There is no export step between drawing and seeing. The geometry recomputes while the brush is still down.</p>
</div>

The same head with a label instead

section-head-note is a label wherever it appears; section-head-lede is a sentence. A four-word aside beside a heading and a two-line subtitle want different faces, and no layout can tell which one it has been handed — so it is the caller who says.

GALLERY

Made in Flatty

Sixteen pixels wide is enough

HTML

<div class="section-head section-head-block" style="width:100%">
  <div class="section-head-main">
    <span class="section-head-kicker">GALLERY</span>
    <h2 class="section-head-title">Made in Flatty</h2>
  </div>
  <span class="section-head-note">Sixteen pixels wide is enough</span>
</div>

Quiet, no note

A kicker that names something rather than numbering it. Same size, less shout.

REFERENCE

HTML

<div class="section-head" style="width:100%">
  <span class="section-head-kicker section-head-kicker-quiet">REFERENCE</span>
  <span class="section-head-rule"></span>
</div>

A way out of the section

section-head-link is the third thing a head can hold, beside a label and a sentence, and the only one that is a control. It takes the kicker's accent rather than the note's faint ink, because it is somewhere to go rather than an aside — and it states a hit area, which link-quiet does not: WCAG 2.5.8 excepts a target inside a SENTENCE, and a link standing alone at the end of a row is not one. Measured at this size the text is 15px tall, nine short of the floor.

RELEASE HISTORY

Still being made

full changelog →

HTML

<!-- The third thing a head can hold, beside a label and a sentence: a way out
     of the section. It takes the kicker's accent rather than the note's faint
     ink, because it is somewhere to go rather than an aside. -->
<div class="section-head section-head-block" style="width:100%">
  <div class="section-head-main">
    <span class="section-head-kicker">RELEASE HISTORY</span>
    <h2 class="section-head-title">Still being made</h2>
  </div>
  <a class="section-head-link" href="#">full changelog →</a>
</div>

Reference

Read from primitives/section-head.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.section-head.section-head-kicker.section-head-kicker-quiet.section-head-rule.section-head-block.section-head-main.section-head-title.section-head-note.section-head-lede.section-head-link

SETTINGSSet the first on one element; a theme sets the second for all of them.--head-title — falls back to --ds-text-h2

READS--ds-accent--ds-focus-ring--ds-focus-width--ds-font-body--ds-font-display--ds-gap--ds-gap-inline--ds-gap-loose--ds-hairline--ds-head-main--ds-head-note--ds-hit-min--ds-ink--ds-ink-faint--ds-ink-soft--ds-rule--ds-rule-basis--ds-text-label--ds-text-meta--ds-text-small--ds-track-label--ds-track-note--ds-track-tight--ds-weight-display

Notes

WHY IT LOOKS LIKE THIS

Alignment is baseline, not centre. The kicker is 11px and the note 10.5px; centring leaves them visibly unaligned, which reads as a rendering fault rather than a choice.
The row wraps. A long kicker in a narrow column pushes the note onto its own line rather than crushing the rule — and the rule's flex-basis is what stops a wrapped rule collapsing to nothing and disappearing.