Callout
Create visually distinct content blocks to highlight important information, warnings, tips, and notes in your posts.
Use Cases
The Callout component is perfect for:
- Notes - Explaining concepts or providing additional context
- Tips - Sharing helpful hints or best practices
- Warnings - Alerting users to potential issues or important considerations
- Errors - Highlighting critical information or common mistakes
- Info - Presenting supplementary details or plan requirements
Usage
<Callout type="note">
Quotion is a blogging platform for **Apple Notes**.
Apple Notes is the best app for your personal blog.
</Callout>
<Callout type="tip" title="Pro Tip">
Use Apple Notes' native formatting features like bold, italic, and lists for the best writing experience, and use MDX components to enhance your post's experience.
</Callout>
<Callout type="warning" title="Don't mix up markdown and Apple Notes formatting">
Use Apple Notes formatting or markdown for a whole block, never mix them up, or you will get unexpected results.
</Callout>
<Callout type="error" title="Use `===` for frontmatter">
Only `===` is supported as the delimiter for frontmatter. YAML's standard `---` delimiter is not supported because Apple Notes automatically converts `---` to an em dash (—).
</Callout>
<Callout type="important" title="Plan Required">
Advanced customization features require a Lite+ plan or higher.
</Callout>Preview
Component API
Callout
The main container component for displaying highlighted content.
| Property | Type | Default | Description |
|---|---|---|---|
type | 'note' | 'tip' | 'important' | 'warning' | 'error' | 'note' | Visual style and semantic meaning |
title | string | undefined | Use type as the title by default |
children | ReactNode | Required | Content to display inside the callout |
FAQs
How is this guide?