Callouts & Details Test
This page demonstrates different callout styles and collapsible blocks using Obsidian-style callouts and HTML details elements.
Static Callouts
These are standard callouts that don’t collapse:
This is a note callout. Use it for additional information or context.
This is an info callout. Similar to note, for informational purposes.
This is a tip callout. Use this for helpful suggestions or best practices.
This is a warning callout. Use for important cautions or things to watch out for.
This is a danger callout. Use for critical warnings or errors.
This is a success callout. Use to highlight completed actions or positive outcomes.
Collapsible Callouts
These callouts collapse with a toggle (use the - suffix):
Note
Click to expand! This is a collapsible note with content that’s hidden by default.
Tip
Helpful Tip
This collapsible tip contains information that might not always be needed.
Warning
Important Warning
This warning can be expanded if you want to read the full details.
Callouts with Custom Icons
Example callout with a different type.
A famous quote or citation goes here.
HTML Details Elements
You can also use HTML <details> elements directly:
Click to expand this section
This is content inside an HTML details element. It provides native browser support for collapsible content.
- You can have lists
- Multiple paragraphs
- Formatted text
Another collapsible section
This demonstrates that HTML details elements work seamlessly with the rest of the content.
// You can even have code blocks
console.log(‘Hello from details!’);
Notion Toggle Blocks
When imported from Notion, toggle blocks are rendered as collapsible callouts:
What is a toggle block?
Toggle blocks in Notion can contain any type of content. When converted to markdown, they become collapsible callouts using the
> [!type]-syntax.
Combined Examples
Advanced: Multiple callout types
You can nest callouts inside details elements for complex layouts.
Just be careful with excessive nesting as it can become confusing.