eddd9d2a80
- 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>
136 lines
3.7 KiB
Markdown
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! |