Enhancing Readability with Callouts in Hugo

Why use callouts

Callouts in notes or web content are a secret weapon for enhancing readability and guiding the reader’s focus. By spotlighting key points such as tips, warnings, or action items, callouts break up dense text, making it visually engaging and easy to navigate—perfect for readers who like to skim for the good stuff. Think of them as visual pitstops for key information.

Beyond making content look better, callouts help readers retain critical details. By emphasizing important points, callouts make it more likely that the message will stick long after the reader has moved on. Plus, they boost engagement, encouraging readers to linger on essential details they might otherwise miss. In short, callouts don’t just share information; they make it memorable.

Hugo support for callouts

Hugo doesn’t come with built-in support for callouts, but there’s a simple solution—shortcodes! By using a shortcode, you can add custom callouts to your Hugo content with ease.

Hugo shortcode for callouts

Thanks to Cosimameyer’s tutorial on implementing callouts in Hugo, we can use the following example shortcodes:

Info

{{< callout type="info" title="Information" >}}
This is an informational callout with default styling.
{{< /callout >}}

Success

{{< callout type="success" title="Success" >}}
Tell me more about your success story.
{{< /callout >}}

Error

{{< callout type="error" title="Mistake" >}}
You're making a big mistake!
{{< /callout >}}

Warning

{{< callout type="warning" title="Caution" >}}
You have been warned!
{{< /callout >}}

Others

{{< callout type="nothing" title="Nothing" >}}
This is nothing!
{{< /callout >}}