blog pattern

Blog post

Single article — hero, body, table of contents, related, comments.

When to use it

A specific /blog/{slug} URL.

  • Reading-friendly typography
  • TOC for long posts
  • Sharing in 1 tap

Layout regions

  • header
  • hero
  • main
  • article
  • toc
  • related
  • footer

States

  • default
  • loading

Example

<Container variant="md"><Hero post={p} /><Grid variant="asymmetric" cols="200px 1fr"><TOC headings={p.headings} /><article className="prose">{p.body}</article></Grid></Container>

The full Blog post pattern specifies 2 exact microcopy strings, 2 motion specs, 5 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Blog post pattern in your project.