Stack spacing

How to use it

Use as the default wrapper for any vertical run of mixed content (a heading, paragraphs, a button) so the space between items comes from one token instead of per-element margins. Use the tight modifier inside small groups and the loose one between sections; use a grid instead when items sit side by side. Rename the custom properties to match your own spacing scale; the demo button does nothing until you wire it.

Accessibility

The stack is pure layout: a flex column with gap, so it adds no roles, never reorders content and leaves the source order as the reading and Tab order. Spacing comes from gap rather than margins on children, so spacing stays consistent when text is resized or a child is hidden. The headline is #0f172a on #ffffff (17.85:1), body and note text #334155 on #ffffff (10.35:1), code #0f172a on #f1f5f9 (16.30:1) and the button #ffffff on #1d4ed8 (6.70:1), #ffffff on #1e40af while hovered (8.72:1).

Source (copy-ready)

Copy code

<div class="dcl-stack dcl-stack--loose">
  <div class="dcl-stack">
    <div class="dcl-stack dcl-stack--tight">
      <p class="dcl-stack__eyebrow">Workshop</p>
      <h2 class="dcl-stack__headline">Introduction to woodturning</h2>
    </div>
    <p class="dcl-stack__text">Two evening sessions on the lathe: tool safety, sharpening, and turning a simple bowl to take home.</p>
    <button type="button" class="dcl-stack__button">Reserve a place</button>
  </div>
  <p class="dcl-stack__note">Spacing tokens: <code class="dcl-stack__code">--dcl-stack-space-tight</code> (0.5rem) for label and title, <code class="dcl-stack__code">--dcl-stack-space</code> (1rem) between content, <code class="dcl-stack__code">--dcl-stack-space-loose</code> (2rem) between sections.</p>
</div>
<style>
.dcl-stack { --dcl-stack-space-tight: 0.5rem; --dcl-stack-space: 1rem; --dcl-stack-space-loose: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--dcl-stack-space); max-width: 36rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-stack--tight { gap: var(--dcl-stack-space-tight); }
.dcl-stack--loose { gap: var(--dcl-stack-space-loose); }
.dcl-stack > * { margin: 0; max-width: 100%; }
.dcl-stack__eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #334155; background-color: #ffffff; }
.dcl-stack__headline { font-size: 1.5rem; line-height: 1.2; color: #0f172a; background-color: #ffffff; }
.dcl-stack__text { overflow-wrap: anywhere; color: #334155; background-color: #ffffff; }
.dcl-stack__button { min-height: 2.75rem; padding: 0.5rem 1.25rem; border: none; border-radius: 0.375rem; font: inherit; font-weight: 600; cursor: pointer; color: #ffffff; background-color: #1d4ed8; }
.dcl-stack__button:hover { color: #ffffff; background-color: #1e40af; }
.dcl-stack__button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-stack__note { padding-top: 1rem; border-top: 1px dashed #94a3b8; font-size: 0.875rem; overflow-wrap: anywhere; color: #334155; background-color: #ffffff; }
.dcl-stack__code { padding: 0 0.25rem; border-radius: 0.25rem; font-size: 0.8125rem; color: #0f172a; background-color: #f1f5f9; }
</style>