Callout Components (MDX)

This guide shows how to use the <Callout> Astro component in MDX files.

Note: For Markdown (.md) files, see Callout Syntax (MD) which uses GitHub-style blockquote syntax.

Basic Usage

Note

This is a note callout. It’s perfect for supplementary information that readers might find helpful.

Warning

This is a warning callout. Use it when readers need to be careful about something.

Tip

This is a tip callout. It’s great for sharing shortcuts or recommendations.

Info

This is an info callout. Use it for technical details or reference information.

Custom Titles

You can customize the title or use the default title for each type:

Note

This note uses the default “Note” title.

Pro Tip

You can also add markdown inside callouts, including code and links.

Multi-line Content

Callouts can contain multiple paragraphs, lists, and other markdown content.

Multi-line Note

This is the first paragraph of the note. It provides some initial context or information that the reader should know.

This is the second paragraph. Callouts can contain multiple paragraphs to provide more detailed explanations or instructions.

You can also include lists:

First item with some details
Second item with additional information
Third item to complete the list

And even bold or italic text for emphasis.

Important Warning

When working with callouts, keep in mind that they are designed for short, focused content. If you need to convey a lot of information, consider breaking it into multiple callouts or using regular paragraphs instead.

Here are some best practices:

Keep callouts concise and to the point
Use the appropriate type for the content
Don’t overload callouts with too much information
Use markdown formatting to highlight key points

Advanced Usage

Callouts support various markdown features:

Bold text for emphasis, italic text for subtle emphasis, and inline code for technical terms.

You can also create ordered lists:

Step one: Import the component
Step two: Choose the callout type
Step three: Add your content

And unordered lists:

Feature one
Feature two
Feature three

This flexibility makes callouts versatile for different use cases.

Technical Details

The callout component is built with Astro and uses CSS custom properties for theming. Each callout type has its own color scheme that automatically adapts to light and dark modes.

The component structure is:

<div class="callout callout-{type}">
  <div class="callout-header">
    <div class="callout-icon">...</div>
    <span class="callout-title">{title}</span>
  </div>
  <div class="callout-body">
    <slot />
  </div>
</div>

This makes it easy to customize and extend the callout component for your specific needs.

How to Use

Create a .mdx file in src/content/blog/
Import the component at the top:

import Callout from '../../components/Callout.astro';

Use the component in your content:

<Callout type="note" title="Your Title">
Your content here.
</Callout>

Available Types

Type	Use Case
`note`	General information, side notes
`warning`	Potential issues, important considerations
`tip`	Suggestions, best practices
`info`	Technical details, reference material