Callout
A tinted box inside your content flagging a note, tip, warning, or danger, usually with an icon and a colored border.
See it
What it is
A callout is a tinted box sitting inside the flow of your content that flags something the reader should not skim past: a note, a tip, a warning, a danger. Icon on the left, colored border or background, sometimes a bold label. Sphinx named them 'admonitions', Docusaurus writes them as ':::note', GitHub markdown uses '> [!WARNING]', and Notion just calls them callouts.
Reach for one when the information would break the sentence you are in the middle of: a version caveat, a destructive step, a shortcut that saves ten minutes. Keep the levels few and consistent, typically note, tip, warning, and danger, each with a fixed color and icon so readers learn the code.
Gotcha: callout inflation. When every third paragraph is a yellow box, readers stop seeing all of them, including the one that says you will lose data. Two more traps: color alone cannot carry the severity, so always pair it with an icon and a text label for colorblind readers, and do not slap role='alert' on a static callout. That role is for messages that appear in response to something, and it will interrupt screen reader users mid-sentence on page load.
Ask AI for it
Build a callout component with four variants (note, tip, warning, danger). Each is a rounded box with a 3px colored left border, a background at about 8% opacity of that same hue, 16px of padding, an icon in the top-left (info, lightbulb, triangle, octagon) matching the border color, an optional bold title line, and body text that supports paragraphs, links, and code. Keep body text at normal foreground color for contrast rather than tinting it. Render as an <aside> with a visually meaningful icon plus a visible or screen-reader-only label naming the severity, and derive all four variants from one set of CSS custom properties so dark mode is a single override.