Alerts, Callouts, and AdmonitionsšŸ“£
Updated  by  nm  2025-September-29


In tech writing, an alert is used to highlight a bit of information. For example, here is an alert about the word alert:

note

The words alert, callout, and admonition are often used synonymously.



An alert is usually one of the following five types.

Alert TypeMeaning1
noteUseful information that users should know, even when skimming content
tipHelpful advice for doing things better or more easily
importantKey information users need to know to achieve their goal
warningUrgent info that needs immediate user attention to avoid problems
cautionAdvice about risks or negative outcomes of certain actions

Before I switched from AsciiDoc to Markdown, I didn’t think much about styling Infinite Ink’s alerts because I used AsciiDoc alerts with Asciidoctor’s default styles. Here is what AsciiDoc alerts looks like on InfiniteĀ Ink:

ℹ
An AsciiDoc ā€œNoteā€ is rendered like this on InfiniteĀ Ink.
šŸ’”
An AsciiDoc ā€œTipā€ is rendered like this on InfiniteĀ Ink.
‼
An AsciiDoc ā€œImportantā€ is rendered like this on InfiniteĀ Ink.
⚠
An AsciiDoc ā€œWarningā€ is rendered like this on InfiniteĀ Ink.
🚧
An AsciiDoc ā€œCautionā€ is rendered like this on InfiniteĀ Ink.

In Markdown, there is not a standard way to create and style alerts, but there has been a lot of discussion about this. For example, see the following talk.commonmark.org discussion that took place from 2022-May to 2024-December (more than a year and a half discussionšŸ’¬šŸ—Øļø):

Ā āš ļø GitHub is beta testing their own Admonition syntax. We should weigh in


After a lot of discussion, GitHub is now styling a Markdown note alert like this:



Because Infinite Ink does not use GFM2 and because I don’t like the syntax or style of GFM alerts, I’m experimenting with the design of InfiniteĀ Ink’s alerts. They currently look like this:

tip

The Hugo shortcode that generates this tip uses the HTML fieldset tag and the HTML legend tag.


Endnotes



  1. The text of these alert meanings are from GitHub’s Markdown docs, which have a creative commons license.šŸ…­ ↩︎

  2. Instead of GitHub-Flavored Markdown (GFM), Infinite Ink uses Goldmark-Flavored and Pandoc-Flavored Markdown. ↩︎


Please share & discuss 📝 👎 👍 📯