Files
kestrelsnest-blog/content/posts/callout-examples.md
Eric Wagoner eddd9d2a80 Import WordPress posts and migrate standalone content to Hugo
- Successfully imported 1731 WordPress posts to Hugo markdown format
- Migrated 204+ images from archive to static directory
- Copied standalone directories (curtain, farm, gobbler, house, images, party, revcemetery, railsday, birthday)
- Fixed all internal links to use /legacy prefix for archived content
- Remapped archive links to point to correct Hugo posts
- Fixed Louisville Georgia Cemetery post rendering issue

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-23 16:23:40 -04:00

136 lines
3.7 KiB
Markdown

---
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!