kestrelsnest-blog/content/posts/callout-examples.md

title, date, draft, tags

title	date	draft	tags
Callout Block Examples	2025-01-13T19:00:00-05:00	true	documentation features

This post demonstrates the new callout blocks feature for highlighting important information in your blog posts.

Available Callout Types

Note (Default)

{{< callout type="note" >}} This is a standard note callout. Use it for general observations or additional information that complements your main text. {{< /callout >}}

Tip

{{< callout type="tip" title="Pro Tip" >}} Share helpful advice or best practices with the tip callout. Great for tutorials and how-to guides!

You can include formatted text, inline code, and even lists:

• First item
• Second item
• Third item {{< /callout >}}

Information

{{< callout type="info" >}} The info callout is perfect for providing context or background information. It draws attention without being too assertive. {{< /callout >}}

Warning

{{< callout type="warning" >}} Use warning callouts to alert readers about potential issues or important caveats. This helps prevent mistakes and ensures important information isn't overlooked. {{< /callout >}}

Danger

{{< callout type="danger" title="Critical Alert" >}} Danger callouts are for the most important warnings. Use these sparingly for truly critical information that could lead to data loss or security issues if ignored. {{< /callout >}}

Success

{{< callout type="success" >}} Celebrate achievements or confirm successful operations with success callouts! ✨

Perfect for:

• Confirmation messages
• Achievement milestones
• Positive outcomes {{< /callout >}}

Question

{{< callout type="question" title="Did You Know?" >}} Question callouts are great for FAQs, rhetorical questions, or thought-provoking content that encourages reader engagement. {{< /callout >}}

Quote

{{< callout type="quote" >}} "The best way to predict the future is to invent it." - Alan Kay

Quote callouts provide an elegant way to highlight quotations or testimonials. {{< /callout >}}

Example

{{< callout type="example" title="Code Example" >}} Here's how you use a callout in your markdown:

{{</* callout type="info" title="Custom Title" */>}}
Your content here with **markdown** support!
{{</* /callout */>}}

Examples help readers understand how to use features in practice. {{< /callout >}}

Bug Report

{{< callout type="bug" title="Known Issue" >}} Document bugs or known issues with the bug callout type. This helps users understand current limitations and workarounds.

Workaround: Use the alternative method described in the documentation until this is fixed. {{< /callout >}}

Usage in Your Posts

To use callouts in your blog posts, use the shortcode syntax:

{{</* callout type="tip" title="Optional Custom Title" */>}}
Your content with full markdown support
{{</* /callout */>}}

Parameters:

• type: The callout type (note, tip, info, warning, danger, success, question, quote, example, bug)
• title: Optional custom title (defaults to the capitalized type name)

Nested Content Support

{{< callout type="info" title="Advanced Features" >}} Callouts support complex nested content:

1. Numbered lists with formatting
2. Code blocks for technical content:

   hugo server -D
   

3. Links to other resources
4. Even nested emphasis and combined styles

All markdown features work inside callouts! {{< /callout >}}

Mobile Responsive

{{< callout type="success" >}} All callout blocks are fully responsive and adapt to smaller screens with adjusted padding and font sizes for optimal mobile reading experience. {{< /callout >}}

---

Now you can make your blog posts more engaging and organized with these beautiful callout blocks!