.sidenote-memory::before {
content: "cognition";
}
Sidenotes
Sidenotes are the typographic equivalent of having a knowledgeable friend lean over and whisper context while you’re reading. They provide supplementary information, references, or commentary without disrupting the main narrative flow—because nothing kills momentum quite like footnotes at the bottom of the page that make you scroll like it’s 19951.
1 You weren’t born yet then, right?
We provide two distinct elements for different annotation needs:
sidenote— The workhorse of our marginalia system. This is a flexible block element that can contain text, images, interactive elements, or your grandmother’s secret borscht recipe if that’s somehow relevant to your content. Built on a 9-column grid system, it ensures the main content column remains unbroken while providing unlimited creative freedom for supplementary content. Use this when you need a proper sidebar conversation.aside-footer— The rebel that doesn’t follow margin rules. This element appears alongside the paragraph after the one being commented on, rather than beside it. Useful for logical asides or when the space next to the original paragraph is already occupied by another sidenote (it happens—some content is just chatty). On mobile, it reverts to following the commented paragraph directly, because we’re not complete anarchists.
In Rare Styles, sidenotes live in the right margin of text pages, creating a visual dialogue between primary and secondary content. On mobile devices, where margins are a luxury we can’t afford, they gracefully fold into the main column immediately after the commented element. They’re styled with smaller font sizes and secondary colors to signal their supporting role—think backup dancers, not the main act.
To help readers quickly parse the nature of sidenote content, we provide several modifier classes that add visual cues:
sidenote-bookmark— Decorated with a bookmark icon, this signals editorial comments, observations, or quick asides. Perfect for “by the way” moments that deserve their own visual identity.sidenote-link— For reference sidenotes and external citations. The icon treatment makes it immediately clear that this sidenote is pointing elsewhere, saving readers the cognitive overhead of discovering this mid-sentence.sidenote-attach— The paperclip of the digital age. Marks sidenotes containing supplementary materials, downloads, related resources, or that PDF your colleague keeps referencing but never actually shares. Makes “additional resources” actually discoverable.sidenote-bulb— The lightbulb moment carrier. Use this for helpful tips, practical insights, and those “why didn’t I think of that” ideas that make readers feel smarter. Because sometimes a good lifehack deserves more fanfare than plain text can provide.sidenote— When you need that personal touch or want to simulate marginalia in a vintage textbook. Use sparingly, unless you’re writing a manifesto (we don’t judge).
Look at example
Or another one
The system is extensible—you can create your own sidenote types by adding custom selectors to your styles. Simply define a new class with a ::before pseudo-element and specify any Material Icons name:
This opens the door to domain-specific marginalia: .sidenote-warning for caveats, .sidenote-experiment for research notes, .sidenote-coffee for productivity tips that require caffeine. The only limit is your imagination and Google’s Material Icons library.
Memory Activation: Remember Rareism principles. Just because you can create custom sidenote types doesn’t mean you should turn your margins into an icon bazaar.
Don’t forget to add your new selector to the shared icon properties group to ensure consistent positioning and styling:
// assets/css/modules/typography/_text-content.scss
.sidenote-attach::before,
.sidenote-link::before,
.sidenote-bulb::before,
.sidenote-memory::before {
font-family: "Material Symbols Outlined";
font-size: var(--font-size-lg);
position: absolute;
top: -8px;
left: -16px;
color: var(--text-color-light);
}