Components
Callouts and Tips
Reusable content patterns for warnings, tips, and implementation notes.
Callouts and Tips
Well-placed callouts speed comprehension when readers are scanning.
Suggested callout types
- Tip: best-practice shortcuts.
- Note: useful context before implementation.
- Warning: destructive or irreversible actions.
- Info: neutral clarification.
Authoring pattern
Start with one sentence that tells the reader exactly why the callout matters.
Keep callouts short
Limit callouts to three lines where possible. If it needs more, promote it to a full section.
Styling approach
Use one shared border radius and one shared spacing scale. Differentiate callout categories through tint and icon, not through unrelated spacing changes.
When not to use callouts
Do not wrap every important paragraph in a callout. Overuse makes all callouts feel like noise.
Updated April 15, 2026

