Callout Box — Note, Tip & Warning Admonition Snippet

A callout box — also called an admonition, alert, or note box — is one of the most-searched content components because every documentation site, README, blog post, and help center needs a way to make important asides stand out from the body text (often right beside a code block). This snippet ships four ready-made variants — note, tip, warning, and danger — each with an icon, a colored accent bar, a tinted background, and a title, built entirely with pure CSS. The variant is set by a single class, so adding a callout to any content is one line of markup.

The anatomy of a callout

Each callout is a flex row with two parts: an icon on the left that signals the type at a glance, and a body with a bold title and the message. The whole box has a tinted background, a subtle full border, and — the signature detail — a thicker colored left border (border-left-width: 4px) that acts as an accent bar. This left-accent-bar pattern is the visual convention readers immediately recognize as "this is a callout," used by GitHub, MDN, Docusaurus, and virtually every docs framework. The combination of color, icon, and accent makes the callout's importance and category obvious without reading a word.

Color-coding by severity

The four variants follow a universal severity scale that readers already understand: note is blue (neutral information), tip is green (a helpful suggestion), warning is amber (proceed with caution), and danger is red (destructive or irreversible). Each variant coordinates four things — the background tint, the full border color, the left-accent-bar color, and the icon plus title color — so the callout reads as a single coherent color. Changing the variant class (note/tip/warning/danger) re-skins the entire box. Using conventional colors means the meaning is instant: a red box says "stop and read this" before the reader processes the text.

Matching icons to meaning

Color alone is not enough — color-blind readers and quick scanners benefit from distinct icons per type: an info circle for note, a lightbulb for tip, a warning triangle for warning, and an X-circle for danger. The icons are inline SVGs that inherit the variant's color via stroke, so they always match the box. Pairing a recognizable icon with the color means the callout type is identifiable two ways, which is both clearer and more accessible than relying on hue alone — the same reason good alert components never use color as their only signal.

Why a single class drives everything

The power of this component is that all the styling cascades from one class on the wrapper. Markup-wise, a callout is just <div class="callout warning"> with an icon and body inside — no per-element color classes, no inline styles. The CSS targets .callout.warning .ct-title, .callout.warning .ic svg, etc., so the title, icon, background, and borders all derive from that one word. This is exactly how documentation tooling works (you write :::warning and the renderer adds the class), and it makes callouts trivial to author and consistent across a whole site.

Built for content, not chrome

Callouts live inside flowing content — paragraphs, lists, code blocks — so they are designed to sit naturally in a column of text. They have comfortable padding, readable line height, and a max-width that matches a content column. The body text uses a neutral slate color so it stays legible regardless of the variant's accent. Because the box is just a styled div, you can put anything inside it: multiple paragraphs, a list, a link, even a code snippet — the icon stays pinned to the top-left while the body flows.

Customizing the callouts

Re-theme any variant by changing its four coordinated colors (background, border, left-accent, icon/title) — keep them as shades of one hue so the box reads as a single color. Add new variants (for example, "success" or "info") by copying a block and swapping the hue. Swap the icons for your icon set; they inherit color automatically via stroke: currentColor if you set the title color on a shared parent. To make the title optional, just omit the .ct-title paragraph. For a more minimal look, drop the full border and keep only the left accent bar and background tint. Because everything is class-driven CSS, these are all small edits.

Accessibility considerations

For purely visual emphasis, a callout is a styled container and needs no special ARIA. If a callout conveys something a screen-reader user must not miss (like a danger warning), you can add role="note" for general asides, or for time-sensitive alerts use role="alert" (which announces immediately) — but reserve alert for genuinely urgent, dynamically-inserted messages, not static page content. The icon is decorative and the title text provides the category in words, so the meaning is available without seeing the color or icon. Keep sufficient contrast between the body text and the tinted background (the slate-on-light-tint here passes AA) so the message stays readable in every variant.