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