Courses
Hugo Blox
Guide
Formatting
Callouts

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.
Note

This is a note callout with important information that users should know.

> [!INFO]
> Alternative info callout - same styling as NOTE.
Info

Alternative info callout - same styling as NOTE.

> [!ABSTRACT]
> Use for abstracts, summaries, or TL;DR sections.
Abstract

Use for abstracts, summaries, or TL;DR sections.

Actions & Tasks:

> [!TODO]
> This is something that needs to be done.
Todo

This is something that needs to be done.

> [!TIP]
> Here's a helpful tip to make your workflow more efficient!
Tip

Here’s a helpful tip to make your workflow more efficient!

> [!SUCCESS]
> Great job! This operation completed successfully.
Success

Great job! This operation completed successfully.

Questions & Interactive:

> [!QUESTION]
> What do you think about this approach? Let us know!
Question

What do you think about this approach? Let us know!

> [!EXAMPLE]
> Here's a practical example of how to implement this feature.
Example

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
Quote

“The best way to predict the future is to invent it.” - Alan Kay

Warnings & Errors:

> [!WARNING]
> Be careful! This action might have unexpected consequences.
Warning

Be careful! This action might have unexpected consequences.

> [!CAUTION]
> Danger! This operation is irreversible and could cause data loss.
Caution

Danger! This operation is irreversible and could cause data loss.

> [!IMPORTANT]
> This is critical information that users must understand to proceed.
Important

This is critical information that users must understand to proceed.

> [!DANGER]
> This is extremely dangerous - proceed with extreme caution!
Danger

This is extremely dangerous - proceed with extreme caution!

> [!FAILURE]
> This operation failed. Check your configuration and try again.
Failure

This operation failed. Check your configuration and try again.

> [!BUG]
> Known issue: This feature doesn't work properly in Safari < 14.
Bug

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".
Custom Warning Title

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)