Callouts and Sidenotes
Callouts
Callouts draw attention to important information. This blog supports seven types of callouts.
Callout Without a Title
Sidenotes
Sidenotes provide marginal comments in the style of Edward Tufte's design philosophy. They're perfect for tangential information that enriches the main narrative without interrupting it.
You can use multiple sidenotes throughout your post. The sidenote styling adapts to the screen size—on desktop they float in the margin, while on mobile they become expandable inline elements.
When to Use What
Choosing between callouts and sidenotes affects how your reader experiences your content. Sidenotes are great for supplementary context about algorithms or relating to concepts in example code blocks.
- Callouts: Use when you have information that needs immediate attention or emphasis.
- Sidenotes: Use for supplementary context that enriches understanding without being essential to follow the main narrative.
Combining Components
You can nest components intelligently. For instance, a warning in a sidenote:
This approach to error handling is widely used in production systems.
Mobile Experience
Both callouts and sidenotes are designed to work well on mobile devices. Callouts maintain their appearance, while sidenotes intelligently adapt to the available space.