| 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
- Defining a jargon term inline without breaking flow
- Authorial commentary on the main content
- Citations or references
- Pull-quotes from elsewhere in the article
- 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.
