Container: Callouts
Callouts
Callouts are perfect for drawing the user’s attention to a specific piece of information. They are visually distinct from the regular text and are ideal for tips, warnings, and important notes.
Usage
The basic syntax uses the callout container name, followed by the callout type.
Container blocks (like ::: callout) should be preceded by a blank line to ensure proper parsing by the markdown processor.
Syntax:
::: callout type
The main content of the callout.
:::
With Custom Title:
::: callout type Custom Title Here
The main content of the callout.
:::
Parameters:
type: The type determines the color and styling of the callout. Available types are:info,tip,warning,danger,success.Custom Title Here(optional): Any text following the type becomes the callout title.
Some themes (like Sky) automatically add emojis to callout titles: ℹ️ for info, ⚠️ for warning, 💡 for tip, 🚨 for danger, and ✅ for success.
Examples
Info
Use the info type for general notes or neutral supplementary details.
Code:
::: callout info
This is an informational message. It's great for providing context or background information that is helpful but not critical.
:::
Rendered Preview:
This is an informational message. It’s great for providing context or background information that is helpful but not critical.
With Custom Title:
::: callout info Quick Reference
This callout has a custom title that appears prominently at the top.
:::
Rendered Preview:
This callout has a custom title that appears prominently at the top.
Tip
Use the tip type for helpful tips, best practices, or suggestions.
Code:
::: callout tip
Here's a helpful tip to improve your workflow. Using this shortcut can save you a lot of time!
:::
Rendered Preview:
Here’s a helpful tip to improve your workflow. Using this shortcut can save you a lot of time!
With Custom Title:
::: callout tip Pro Tip
Custom titles help organize your callouts and make them more scannable for readers.
:::
Rendered Preview:
Custom titles help organize your callouts and make them more scannable for readers.
Warning
Use the warning type to indicate something that requires caution or might lead to unexpected results.
Code:
::: callout warning
**Heads up!** Changing this setting can have unintended side effects. Please make sure you understand the consequences before proceeding.
:::
Rendered Preview:
Heads up! Changing this setting can have unintended side effects. Please make sure you understand the consequences before proceeding.
Danger
Use the danger type for critical information, destructive actions, or security warnings.
Code:
::: callout danger
**Critical!** This action is irreversible and will result in permanent data loss. Do not proceed unless you have a backup.
:::
Rendered Preview:
Critical! This action is irreversible and will result in permanent data loss. Do not proceed unless you have a backup.
All Callout Types with Titles
Here’s a quick reference showing all available callout types with custom titles:
Use info callouts for neutral supplementary information.
Use tip callouts for helpful suggestions and best practices.
Use warning callouts for actions that require caution.
Use danger callouts for destructive actions or critical warnings.
Use success callouts to indicate completed tasks or positive outcomes.