Skip to content

PatternsContent patternsSection

Section

A block of content with a H2 heading. The most-reused container on the site.

2-4 paragraphsOptional H3 subsectionsOptional figure at the end

Anatomy

  1. H2: 1 line, font-instrument-serif, 1.75-2.125 rem, -0.02 em tracking. The argument of the section.
  2. Body: 2-4 paragraphs, body-base, 1.0625 rem, 1.65 line-height. The argument developed.
  3. H3 (optional) — subsections. Same display family at 1.25-1.5 rem.
  4. Figure (optional) — a figure, diagram, or callout at the end. Never in the middle of a paragraph.

Rules of thumb

  • A section is a single idea. If a section has two ideas, it's two sections.
  • Vertical rhythm: 3.5 rem above on mobile, 4.5 rem on desktop.
  • Every section ends with either prose, a figure, a diagram, or a callout. Never just an empty H2.
  • H3 is a sub-argument, not a sub-heading. If it's just labeling content, use a label instead.

The skeleton

tsx
<section className="ds-section" aria-labelledby="approach">
  <h2 id="approach" className="ds-h2">Approach</h2>
  <p>...</p>
  <p>...</p>
  <h3 className="ds-h3">Step 01: ...</h3>
  <p>...</p>
  <Figure chrome="browser" src="..." title="..." caption="..." />
</section>