Callout & Anchor Link Demo
Heading Anchors
All headings on this page have auto-generated anchor links. Hover over any heading to see the # link โ click it to get a shareable URL to that section. This is powered by rehype-slug (adds id attributes) + rehype-autolink-headings (adds clickable links).
You can link to any heading from other pages using fragments:
See the [Informational Callouts section](/demo/callouts/#informational-callouts) for details.Informational Callouts
Note
This is a note callout. Use it for supplementary information that doesnโt fit the main flow but is helpful context for the reader.
Abstract
This is an abstract callout. Ideal for summarizing a longer document or providing a brief overview before diving into details.
Summary
This is a summary callout with a custom title. Summaries help readers who are skimming quickly grasp the essential points.
TL;DR
Too long; didnโt read โ this callout gives the short version for impatient readers.
Info
This is an info callout. It provides helpful contextual information that isnโt critical but enhances understanding.
Task Callouts
Todo
This is a todo callout. Use it to mark action items or tasks that need to be completed.
Positive Callouts
Tip
This is a tip callout with a custom title. Tips share helpful shortcuts or best practices that improve the readerโs workflow.
Hint
This is a hint callout. Hints are subtle nudges that point the reader in the right direction without giving away the full answer.
Important
This is an important callout. Use it for information that readers absolutely must not skip โ critical prerequisites or key distinctions.
Success
This is a success callout. Celebrate when something works! Great for confirming that a setup step completed correctly.
Check
This is a check callout. Use it as a verification checkpoint โ โIf you see X, youโre on the right track.โ
Done
This is a done callout. Marks completed steps or finished processes.
Question Callouts
Question
This is a question callout. Pose a thought-provoking question to engage the reader.
Help
This is a help callout. Direct readers to support resources or troubleshooting steps.
FAQ
This is a FAQ callout. Perfect for addressing frequently asked questions inline within your documentation.
Warning Callouts
Warning
This is a warning callout. Warn readers about potential pitfalls or common mistakes before they encounter them.
Caution
This is a caution callout. Slightly stronger than a warning โ proceed with care and double-check your steps.
Attention
This is an attention callout. Draws the readerโs eye to something that requires careful consideration.
Negative Callouts
Failure
This is a failure callout. Documents known failure modes and what went wrong.
Fail
This is a fail callout. Marks a known anti-pattern or approach that will not work.
Missing
This is a missing callout. Highlights missing pieces โ incomplete features, absent data, or gaps in coverage.
Danger Callouts
Danger
This is a danger callout. Use for operations that can cause data loss, security issues, or irreversible changes. Think twice before proceeding.
Error
This is an error callout. Shows error states and what to do when something goes wrong.
Bug
This is a bug callout. Documents known bugs or unresolved issues that users should be aware of.
Misc Callouts
Example
This is an example callout. Provides a worked example that demonstrates the concept being discussed.
Quote
This is a quote callout. Highlight notable quotes or references from external sources.
Cite
This is a cite callout. Provides citations or attribution for ideas, code, or content from other sources.
Mixed Content Inside Callouts
Callouts support rich Markdown content inside them:
You can use all standard Markdown inside callouts:
Bold and italic text
Inline codesnippetsLists and enumerations
Even blockquotes work inside callouts!
Remember that you can combine callouts with anchor links! Reference any heading on any page:
See Informational Callouts above
Or Danger Callouts below
Or external pages like the blog post