<p>Callouts, also known as Admonitions, are similar to the standard block quotes in their syntax, but they have a <code>[!type]</code> at the beginning. You can see the supported types below. Alternatively, you can add any text you want in the brackets<code>[!xyz]</code></p>
<h2 id="custom"><a aria-hidden="true" tabindex="-1" href="#custom"><span class="icon icon-link"></span></a>custom</h2>
<pre><code>> [!any text you want]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#448aff;">
<div class="callout-title note" style="background-color: #448aff1a;"><span style="color:#448aff" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-pencil"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg></span><strong>Any text you want</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="tip"><a aria-hidden="true" tabindex="-1" href="#tip"><span class="icon icon-link"></span></a>tip</h2>
<p>aliases: hint, important</p>
<pre><code>> [!tip]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#00bfa6;">
<div class="callout-title tip" style="background-color: #00bfa61a;"><span style="color:#00bfa6" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-flame"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg></span><strong>Tip</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="note"><a aria-hidden="true" tabindex="-1" href="#note"><span class="icon icon-link"></span></a>note</h2>
<pre><code>> [!note]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#448aff;">
<div class="callout-title note" style="background-color: #448aff1a;"><span style="color:#448aff" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-pencil"><line x1="18" y1="2" x2="22" y2="6"></line><path d="M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z"></path></svg></span><strong>Note</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="warning"><a aria-hidden="true" tabindex="-1" href="#warning"><span class="icon icon-link"></span></a>warning</h2>
<p> alises: caution, attention</p>
<pre><code>> [!warning]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#ff9100;">
<div class="callout-title warning" style="background-color: #ff91001a;"><span style="color:#ff9100" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-alert-triangle"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span><strong>Warning</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="abstract"><a aria-hidden="true" tabindex="-1" href="#abstract"><span class="icon icon-link"></span></a>abstract</h2>
<p>aliases: summary, tldr</p>
<pre><code>> [!abstract]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#00aeff;">
<div class="callout-title abstract" style="background-color: #00aeff1a;"><span style="color:#00aeff" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-clipboard-list"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"></path><path d="M12 11h4"></path><path d="M12 16h4"></path><path d="M8 11h.01"></path><path d="M8 16h.01"></path></svg></span><strong>Abstract</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="info"><a aria-hidden="true" tabindex="-1" href="#info"><span class="icon icon-link"></span></a>info</h2>
<pre><code>> [!info]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#00b8d4;">
<div class="callout-title info" style="background-color: #00b8d41a;"><span style="color:#00b8d4" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span><strong>Info</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="todo"><a aria-hidden="true" tabindex="-1" href="#todo"><span class="icon icon-link"></span></a>todo</h2>
<pre><code>> [!todo]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#00b8d4;">
<div class="callout-title todo" style="background-color: #00b8d41a;"><span style="color:#00b8d4" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-check-circle-2"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"></path><path d="m9 12 2 2 4-4"></path></svg></span><strong>Todo</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="success"><a aria-hidden="true" tabindex="-1" href="#success"><span class="icon icon-link"></span></a>success</h2>
<p>aliases: check, done</p>
<pre><code>> [!success]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#00c853;">
<div class="callout-title success" style="background-color: #00c8531a;"><span style="color:#00c853" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-check"><polyline points="20 6 9 17 4 12"></polyline></svg></span><strong>Success</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="question"><a aria-hidden="true" tabindex="-1" href="#question"><span class="icon icon-link"></span></a>question</h2>
<p>aliases: help, faq</p>
<pre><code>> [!question]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#63dd17;">
<div class="callout-title question" style="background-color: #63dd171a;"><span style="color:#63dd17" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span><strong>Question</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="failure"><a aria-hidden="true" tabindex="-1" href="#failure"><span class="icon icon-link"></span></a>failure</h2>
<p>aliases: fail, missing</p>
<pre><code>> [!failure]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#ff5252;">
<div class="callout-title failure" style="background-color: #ff52521a;"><span style="color:#ff5252" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span><strong>Failure</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="danger"><a aria-hidden="true" tabindex="-1" href="#danger"><span class="icon icon-link"></span></a>danger</h2>
<p>aliases: error</p>
<pre><code>> [!danger]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#ff1745;">
<div class="callout-title danger" style="background-color: #ff17451a;"><span style="color:#ff1745" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg></span><strong>Danger</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="bug"><a aria-hidden="true" tabindex="-1" href="#bug"><span class="icon icon-link"></span></a>bug</h2>
<pre><code>> [!bug]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#f50057;">
<div class="callout-title bug" style="background-color: #f500571a;"><span style="color:#f50057" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-bug"><rect x="8" y="6" width="8" height="14" rx="4"></rect><path d="m19 7-3 2"></path><path d="m5 7 3 2"></path><path d="m19 19-3-2"></path><path d="m5 19 3-2"></path><path d="M20 13h-4"></path><path d="M4 13h4"></path><path d="m10 4 1 2"></path><path d="m14 4-1 2"></path></svg></span><strong>Bug</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="example"><a aria-hidden="true" tabindex="-1" href="#example"><span class="icon icon-link"></span></a>example</h2>
<pre><code>> [!example]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#7c4dff;">
<div class="callout-title example" style="background-color: #7c4dff1a;"><span style="color:#7c4dff" class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg></span><strong>Example</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>
<h2 id="quote"><a aria-hidden="true" tabindex="-1" href="#quote"><span class="icon icon-link"></span></a>quote</h2>
<p>aliases: cite</p>
<pre><code>> [!quote]
> hello callout
</code></pre>
<div><blockquote class="callout" style="border-left-color:#9e9e9e;">
<div class="callout-title quote" style="background-color: #9e9e9e1a;"><span style="color:#9e9e9e" class="callout-icon"><svg viewBox="0 0 100 100" class="quote-glyph" width="16" height="16"><path fill="currentColor" stroke="currentColor" d="M16.7,13.3c-3.7,0-6.7,3-6.7,6.7v26.7c0,3.7,3,6.7,6.7,6.7h13.5c0.1,6-0.5,18.7-6.3,28.2c0,0,0,0,0,0 c-0.9,1.4-0.7,3.1,0.5,4.2c1.2,1.1,3,1.2,4.3,0.2c0,0,14.7-11.2,14.7-32.7V20c0-3.7-3-6.7-6.7-6.7L16.7,13.3z M63.3,13.3 c-3.7,0-6.7,3-6.7,6.7v26.7c0,3.7,3,6.7,6.7,6.7h13.5c0.1,6-0.5,18.7-6.3,28.2h0c-0.9,1.4-0.7,3.1,0.5,4.2c1.2,1.1,3,1.2,4.3,0.2 c0,0,14.7-11.2,14.7-32.7V20c0-3.7-3-6.7-6.7-6.7L63.3,13.3z"></path></svg></span><strong>Quote</strong></div>
<div class="callout-content" style=""><p>hello callout</p></div>
</blockquote></div>

Creating your site

Installing Mixa Obsidian Plugin

Setting up a Blog With Obsidian/Markdown

Blog

Resume

Using Mixa With Notion

Components

Carousel

Column

Hero

Video

Callouts

Image

Link

Math

Text

Site Editor

Setup

SEO and Analytics

Navigation

Code

Features

Theme

Sitemap and RSS

Search

Home Page

Scheduled Publishing

Static Files

Frontmatter

Quick Start

quick-start

templates

Notion

notion

components

Syntax

syntax

Markdown

markdown

site-editor

features

docs