Callouts provide a way to visually draw attention to related information. Depending on the context or significance, you can use a different style to draw more attention to more critical pieces of information.
In some cases, it may not be obvious when to use a callout vs. a side note. In general, use a callout for information that is directly actionable or adds significant context for the reader. Or, if it helps, callouts can generally stand independently as a useful piece of information regardless of the context of the article.
Side notes on the other hand are brief notes that either provide directly-relevant, but not critical, context or references to other materials for scenarios where a reader would like to dive deeper on the background for a given topic.
Semantics
There are 6 style options for callouts so that they can be used for different purposes and stand apart from each other when multile callouts are involved.
- byline - “An acknowledgement of pages on the site that were written predominantly by someone else.”
- update - “Since this was originally published, it has been updated to incorporate details about a noteworthy change or additional context that is immediately relevant to the topic.”
- tip - “When there’s handy tip that’s tangentially related and interesting but may not be for everyone. For example, if there’s a tool only available on a specific platform, it can be worth calling out even if it doesn’t benefit everyone.”
- info - “For interesting or relevant facts that may come in handy. Helps for specifying version information so that people have the necessary context if reading something years later.”
- warn - “A piece of information that may not be absolutely critical but could save someone a lot of time if they pay closer attention to this specific detail.”
- stop - “For communicating something absolutely critical where the reader could break something or waste a lot of time if they fail to account for a specific detail.”
Layout
Like other block-level article elements, callouts support using the pull styles to tune their layout at larger screen sizes. In most cases, margin is the best, but for critical callouts, it can be handy to use wide or full to ensure they get the necessary attention.