Callouts
Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.
Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.
Usage
Basic Callout Types
Hugo Blox supports all 15+ callout types from Obsidian’s documentation:
Information & Notes:
> [!NOTE]
> This is a note callout with important information that users should know.
This is a note callout with important information that users should know.
> [!INFO]
> Alternative info callout - same styling as NOTE.
Alternative info callout - same styling as NOTE.
> [!ABSTRACT]
> Use for abstracts, summaries, or TL;DR sections.
Use for abstracts, summaries, or TL;DR sections.
Actions & Tasks:
> [!TODO]
> This is something that needs to be done.
This is something that needs to be done.
> [!TIP]
> Here's a helpful tip to make your workflow more efficient!
Here’s a helpful tip to make your workflow more efficient!
> [!SUCCESS]
> Great job! This operation completed successfully.
Great job! This operation completed successfully.
Questions & Interactive:
> [!QUESTION]
> What do you think about this approach? Let us know!
What do you think about this approach? Let us know!
> [!EXAMPLE]
> Here's a practical example of how to implement this feature.
Here’s a practical example of how to implement this feature.
> [!QUOTE]
> "The best way to predict the future is to invent it." - Alan Kay
“The best way to predict the future is to invent it.” - Alan Kay
Warnings & Errors:
> [!WARNING]
> Be careful! This action might have unexpected consequences.
Be careful! This action might have unexpected consequences.
> [!CAUTION]
> Danger! This operation is irreversible and could cause data loss.
Danger! This operation is irreversible and could cause data loss.
> [!IMPORTANT]
> This is critical information that users must understand to proceed.
This is critical information that users must understand to proceed.
> [!DANGER]
> This is extremely dangerous - proceed with extreme caution!
This is extremely dangerous - proceed with extreme caution!
> [!FAILURE]
> This operation failed. Check your configuration and try again.
This operation failed. Check your configuration and try again.
> [!BUG]
> Known issue: This feature doesn't work properly in Safari < 14.
Known issue: This feature doesn’t work properly in Safari < 14.
Custom Titles
You can customize the title of any callout:
> [!WARNING]+ Custom Warning Title
> This warning has a custom title instead of just "Warning".
This warning has a custom title instead of just “Warning”.
Legacy Syntax (Deprecated)
The old shortcode syntax still works but shows a deprecation warning:
{{< callout note >}}
This still works but is deprecated. Use the Markdown syntax above!
{{< /callout >}}
CSS Customization
Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:
- Base class:
.callout - Type-specific data attribute:
data-callout="note" - Component classes:
.callout-icon,.callout-title,.callout-content,.callout-body
Custom CSS Example (add to your assets/css/custom.css):
/* Customize NOTE callouts */
.callout[data-callout="note"] {
border-left-width: 8px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}
/* Make SUCCESS callouts pulse */
.callout[data-callout="success"] {
animation: pulse 2s infinite;
}
/* Custom icon styling */
.callout-icon svg {
transition: transform 0.2s;
}
.callout:hover .callout-icon svg {
transform: scale(1.1);
}
/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
.callout[data-callout="warning"] {
background-color: rgb(92 25 2);
border-color: rgb(245 158 11);
}
}
This approach matches Obsidian’s CSS customization system, ensuring your styles work across platforms.
Benefits of the New Syntax
- Portable: Works with GitHub, Obsidian, and other Markdown editors
- Standard: Uses widely-adopted Markdown callout syntax
- Clean: No Hugo-specific shortcodes needed
- Future-proof: Supported by the latest Hugo versions (0.132.0+)
- Customizable: Semantic CSS classes and data attributes for easy styling
- Complete: All 15+ Obsidian callout types supported
- Multilingual: Callout titles are automatically translated based on your site’s language (and can be customized in the language packs)
