Containers & Alerts
VitePress ::: containers, GitHub Flavored Markdown alerts.
Containers & Alerts#
VitePress containers#
Tip — green-tinted, with a lightbulb icon. Authors use these for actionable recommendations.
Info — neutral blue. Use for context that’s useful but not action-oriented.
Note — close cousin of info; same intent UI but different word for authors who prefer “note”.
Warning — yellow. Reader needs to be careful but probably won’t lose data if they ignore it.
Caution — also yellow. Same intent as warning, different label.
Danger — red. Reader could lose data, break prod, or step on a rake.
Important — red. Same intent as danger; pick whichever fits your writing voice.
A details/disclosure block
The content inside ::: details is hidden behind a summary that the reader expands. Useful for long lists, FAQ-style sections, or anything you want collapsed by default.
It also supports inline markdown, code, and even nested code blocks:
console.log("nested in a details");
With titles#
Containers also accept an optional inline title after the kind.
A warning with a custom title.
GFM alerts#
GitHub Flavored Markdown’s > [!KIND] syntax is rewritten into the same callout primitives.
A GitHub-style note. Same look as ::: info.
A GitHub-style tip. Same look as ::: tip.
A GitHub-style important. Same look as ::: important.
A GitHub-style warning. Same look as ::: warning.
A GitHub-style caution. Same look as ::: caution.
Nesting#
Containers can wrap other containers:
Show nested example
Nested warning inside a details.
echo "code inside the nested warning"
Long-form content inside a callout#
Callouts handle long-form content too. You can put paragraphs, bold, italics, code, links, and even small lists:
First point
Second point
Third point
…and the layout still reads cleanly.