2.4 Callouts & Alerts
Callouts are used to highlight critical context, alerts, tips, or warning boundaries in your notes. Standard supports two callout formats: Obsidian-native blockquotes and @stnd/press custom tag blocks.
1. The Two Callout Syntaxes
Syntax A: Obsidian-Native Blockquotes
This format is 100% compatible with local Obsidian editors.
> [!type] Optional Custom Title
> Callout content. Supports **markdown**, lists, and links.
Syntax B: Custom tag blocks (::callout)
A cleaner, block-encapsulated syntax supported natively by the press engine:
<div class="callout" data-callout="type optional custom title">
<div class="callout-title">
<span class="callout-icon">📝</span>
<span class="callout-title-inner">Type Optional Custom Title</span>
</div>
<div class="callout-content">
Callout content here.
</div>
</div>
2. Collapsible Callouts
To make any callout collapsible (rendered as an HTML <details> disclosure widget on the web), add a suffix (+ or -) right after the type name:
+suffix: Collapsible block that starts open by default.-suffix: Collapsible block that starts closed/collapsed by default.
Obsidian Syntax Example
> [!TIP]- Click to see the hint
> This content is collapsed by default to save reading space.
Block Syntax Example
<details class="callout" data-callout="tip click to see the hint">
<summary class="callout-title">
<span class="callout-icon">📝</span>
<span class="callout-title-inner">Tip Click to see the hint</span>
</summary>
<div class="callout-content">
This content is collapsed by default.
</div>
</details>
3. Supported Callout Types
Standard translates 13 core callout types into beautiful, semantic theme boxes with customized background cards and symbols:
| Type Key | Default Title | Symbol / Emoji | Semantic Use Case |
|---|---|---|---|
note |
Note | 📝 | Standard supplemental context or explanations. |
info |
Info | ℹ️ | Informational details. |
todo |
Todo | ☑️ | Pending tasks or lists. |
tip |
Tip | 💡 | Best practices, optimization shortcuts. |
success |
Success | ✅ | Completed runs, positive confirmations. |
question |
Question | ❓ | Q&A blocks, flashcard prompts. |
warning |
Warning | ⚠️ | Cautions, potential pitfalls, version changes. |
failure |
Failure | ❌ | Errors, failed validations. |
danger |
Danger | ⚡ | High-risk actions, breaking updates. |
bug |
Bug | 🐛 | Reported issues, troubleshooting specs. |
example |
Example | 📄 | Reference samples, code demos. |
quote |
Quote | 💬 | Citations, testimonials. |
abstract |
Abstract | 📋 | Summary paragraphs, table of contents overview. |
4. Notion Toggle Integration
When notes are compiled from Notion workspaces, toggle blocks are automatically mapped to closed collapsible callouts (> [!note]- Title) during ingestion, preserving formatting structure.
5. Spaced Repetition Workflows (Flashcards)
Using the question callout type, you can build flashcards and active-recall blocks inside Obsidian. By formatting a collapsed question box, the answer stays hidden until clicked:
> [!QUESTION]- Quelle est la règle d'importation dans le framework Standard ?
> Les couches supérieures ne peuvent importer que des éléments situés dans les couches inférieures (importation descendante stricte).
Highlights inside Callouts
Highlighting important keywords with double equal signs (==text==) is fully supported within callout blocks. Standard compiles these into <mark> elements:
Always use exact paths when declaring virtual imports.
6. HTML Details Fallbacks
For general collapsing sections that do not need warning banners or custom icons, use standard HTML <details> elements:
Click to view system details
This is a native browser collapsing box. It is perfect for long logs or secondary information.
- Supports standard bullet lists.
- Supports inline code blocks
console.log().