training/skills/hallmark/references/components/s1-left-margin-numbered.md

S1 · Left-margin numbered

A narrow left column holds 01 — LABEL.; the wide right column holds the heading and content. Use when: the page is editorial / specimen. Don't confuse with: S5 Bottom-anchored (which puts the label under the section).

<header class="head-margin">
  <p class="num-label">01 — Foundations</p>
  <h2>…</h2>
</header>

.head-margin { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-xl); align-items: baseline; }