editorial-sidenotes

name	editorial-sidenotes
description	Use when adding context, callouts, or footnotes to article-style pages. Sidenotes elevate above template SaaS without becoming busy.

Editorial Sidenotes

Sidenotes live in the margin or right-rail. They add context without breaking flow. Cousin of footnotes but inline-visible.

Sidenote anatomy

Position: right margin (desktop) or pop-out (mobile) Width: 200-280px Type: 11-13pt, 1.5 leading Color: 60-70% body color Divider: thin top/bottom rule (1px, 30% opacity) Label: small caps title or numbered marker

When to use sidenotes

1. Defining a jargon term inline without breaking flow
2. Authorial commentary on the main content
3. Citations or references
4. Pull-quotes from elsewhere in the article
5. Tangential context that some readers want, others don't

Mobile fallback

On viewport <960px, sidenotes collapse to footnote-style references (e.g., '[1]') with click-to-reveal modals. Don't try to fit margin notes on mobile — they break the reading flow.

Where this fits in the X3 empire

Used in CardPrepAI methodology and education content. The pattern that separates editorial from blog.