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
- Featured image + title + meta
- main
- Article + sticky TOC sidebar
- article
- Markdown-rendered content
- toc
- Sticky table of contents (desktop only)
- related
- "Continue reading"
- footer
States
- default
- Article loaded
- loading
- Late hydration
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.