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

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

<!--more-->

## 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:

```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:

```markdown
{{</* 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:
   ```bash
   hugo server -D
   ```
3. Links to [other resources](https://gohugo.io)
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!