Skip to content

PatternsPage patternsArticle

Article

A long-form essay. The page that does the second-most work on the site.

3 sectionsMax canvas 90 remReading column 42 rem

Anatomy

  1. Hero. Eyebrow (topic), title, lede, meta (date, reading time, word count), no hero image.
  2. Body. 2-4 sections. Each section is a H2 and 2-4 paragraphs. No figures, no diagrams. Footnotes inline.
  3. Footer. A small "If this was useful" CTA, the share row, the related articles.

Rules of thumb

  • No hero image. The first sentence is the first sentence.
  • No figures. An article is prose; a case study has figures.
  • Inline footnotes use superscript numbers, not parentheses.
  • The footer CTA is "If this was useful, share it" — not "Subscribe to our newsletter" (this site has no newsletter).

The skeleton

article/page.tsx
<article className="article">
  <header>
    <p className="ds-page-eyebrow">UX Research</p>
    <h1 className="ds-page-title">What 'cognitive distance' means in product design.</h1>
    <p className="ds-page-lede">...</p>
    <p className="article__meta">7 min read · 1,840 words · 2026-05-22</p>
  </header>
  <section>
    <h2>...</h2>
    <p>...</p>
  </section>
</article>

What not to do