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)
Mining Generalist ⛏️
AI Strategist & Evangelist 💻
Neurodivergent Unicorn 🦄
Allyson is a highly motivated mining and mineral processing engineer with 15 years of experience. Her background is primarily in comminution and flotation optimization utilizing advanced process controls and expert systems.
She completed a Masters of Data Science from the University of British Columbia to hone and utilize her data science skills and subject matter expertise to transform the mining industry.
Her research interests are concentrated on decentralized task allocation for haulage fleets and the use of advanced simulation and optimization for data-driven decision support.