Vuepress 笔记#

使用 callouts#

callout 默认类型#

默认情况下，黑曜石支持多种标注类型和别名。每种类型都有不同的背景颜色和图标。

备注

有如下类型可供使用：

  • note、abstract、info、todo、tip、success、question

  • warning、failure、danger、bug、example、quote

.. note::
有如下类型可供使用：


-  note、abstract、info、todo、tip、success、question
-  warning、failure、danger、bug、example、quote

### 标准

备注

Note

Lorem ipsum dolor sit amet

.. note::
Note


 Lorem ipsum dolor sit amet

备注

Abstract

Lorem ipsum dolor sit amet

.. note::
Abstract


 Lorem ipsum dolor sit amet

备注

Info

Lorem ipsum dolor sit amet

.. note::
Info


 Lorem ipsum dolor sit amet

备注

Todo

Lorem ipsum dolor sit amet

.. note::
Todo


 Lorem ipsum dolor sit amet

小技巧

Tip

Lorem ipsum dolor sit amet

.. tip::
Tip


 Lorem ipsum dolor sit amet

备注

Success

Lorem ipsum dolor sit amet

.. note::
Success


 Lorem ipsum dolor sit amet

备注

Question

Lorem ipsum dolor sit amet

.. note::
Question


 Lorem ipsum dolor sit amet

警告

Warning

Lorem ipsum dolor sit amet

.. warning::
Warning


 Lorem ipsum dolor sit amet

备注

Failure

Lorem ipsum dolor sit amet

.. note::
Failure


 Lorem ipsum dolor sit amet

危险

Danger

Lorem ipsum dolor sit amet

.. danger::
Danger


 Lorem ipsum dolor sit amet

备注

Bug

Lorem ipsum dolor sit amet

.. note::
Bug


 Lorem ipsum dolor sit amet

备注

Example

Lorem ipsum dolor sit amet

.. note::
Example


 Lorem ipsum dolor sit amet

备注

Quote

Lorem ipsum dolor sit amet

.. note::
Quote


 Lorem ipsum dolor sit amet

重要

Important

Lorem ipsum dolor sit amet

.. important::
Important


 Lorem ipsum dolor sit amet

### 下拉

<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="note"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Note</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="note"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Note</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="abstract"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-clipboard-list"> <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect> <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="M12 11h4"></path> <path d="M12 16h4"></path> <path d="M8 11h.01"></path> <path d="M8 16h.01"></path>

</svg></div>

<div class="callout-title-inner">Abstract</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="abstract"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-clipboard-list">
                                     <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                                     <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="M12 11h4"></path>
                                     <path d="M12 16h4"></path>
                                     <path d="M8 11h.01"></path>
                                     <path d="M8 16h.01"></path>
                             </svg></div>
                     <div class="callout-title-inner">Abstract</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="info"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Info</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="info"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Info</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="todo"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Todo</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="todo"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon 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></div>
                     <div class="callout-title-inner">Todo</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="tip"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Tip</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="tip"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Tip</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="success"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-check"> <polyline points="20 6 9 17 4 12"></polyline>

</svg></div>

<div class="callout-title-inner">Success</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="success"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-check">
                                     <polyline points="20 6 9 17 4 12"></polyline>
                             </svg></div>
                     <div class="callout-title-inner">Success</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="question"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Question</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="question"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon 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></div>
                     <div class="callout-title-inner">Question</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="warning"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-alert-triangle"> <path

d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z">

</path> <line x1="12" y1="9" x2="12" y2="13"></line> <line x1="12" y1="17" x2="12.01" y2="17"></line>

</svg></div>

<div class="callout-title-inner">Warning</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="warning"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-alert-triangle">
                                     <path
                                             d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z">
                                     </path>
                                     <line x1="12" y1="9" x2="12" y2="13"></line>
                                     <line x1="12" y1="17" x2="12.01" y2="17"></line>
                             </svg></div>
                     <div class="callout-title-inner">Warning</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="failure"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-x"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>

</svg></div>

<div class="callout-title-inner">Failure</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="failure"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-x">
                                     <line x1="18" y1="6" x2="6" y2="18"></line>
                                     <line x1="6" y1="6" x2="18" y2="18"></line>
                             </svg></div>
                     <div class="callout-title-inner">Failure</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="danger"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-zap"> <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>

</svg></div>

<div class="callout-title-inner">Danger</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="danger"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-zap">
                                     <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                             </svg></div>
                     <div class="callout-title-inner">Danger</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="bug"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Bug</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="bug"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Bug</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="example"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Example</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="example"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Example</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="quote"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-quote"> <path

d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z">

</path> <path

d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z">

</path>

</svg></div>

<div class="callout-title-inner">Quote</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="quote"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-quote">
                                     <path
                                             d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z">
                                     </path>
                                     <path
                                             d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z">
                                     </path>
                             </svg></div>
                     <div class="callout-title-inner">Quote</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="important"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Important</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="important"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Important</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>

扩展自定义的 callout blocks 类型#

### 标准

备注

Alerts note

Lorem ipsum dolor sit amet

.. note::
Alerts note


 Lorem ipsum dolor sit amet

备注

Alerts abstract

Lorem ipsum dolor sit amet

.. note::
Alerts abstract


 Lorem ipsum dolor sit amet

备注

Alerts info

Lorem ipsum dolor sit amet

.. note::
Alerts info


 Lorem ipsum dolor sit amet

备注

Alerts todo

Lorem ipsum dolor sit amet

.. note::
Alerts todo


 Lorem ipsum dolor sit amet

小技巧

Alerts tip

Lorem ipsum dolor sit amet

.. tip::
Alerts tip


 Lorem ipsum dolor sit amet

备注

Alerts success

Lorem ipsum dolor sit amet

.. note::
Alerts success


 Lorem ipsum dolor sit amet

备注

Alerts question

Lorem ipsum dolor sit amet

.. note::
Alerts question


 Lorem ipsum dolor sit amet

警告

Alerts warning

Lorem ipsum dolor sit amet

.. warning::
Alerts warning


 Lorem ipsum dolor sit amet

备注

Alerts failure

Lorem ipsum dolor sit amet

.. note::
Alerts failure


 Lorem ipsum dolor sit amet

备注

Alerts danger

Lorem ipsum dolor sit amet

.. note::
Alerts danger


 Lorem ipsum dolor sit amet

备注

Alerts bug

Lorem ipsum dolor sit amet

.. note::
Alerts bug


 Lorem ipsum dolor sit amet

备注

Alerts example

Lorem ipsum dolor sit amet

.. note::
Alerts example


 Lorem ipsum dolor sit amet

备注

Alerts quote

Lorem ipsum dolor sit amet

.. note::
Alerts quote


 Lorem ipsum dolor sit amet

备注

Alerts important

Lorem ipsum dolor sit amet

.. note::
Alerts important


 Lorem ipsum dolor sit amet

### 下拉

<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-note"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts note</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-note"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts note</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-abstract"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-clipboard-list"> <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect> <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="M12 11h4"></path> <path d="M12 16h4"></path> <path d="M8 11h.01"></path> <path d="M8 16h.01"></path>

</svg></div>

<div class="callout-title-inner">Alerts abstract</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-abstract"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-clipboard-list">
                                     <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
                                     <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="M12 11h4"></path>
                                     <path d="M12 16h4"></path>
                                     <path d="M8 11h.01"></path>
                                     <path d="M8 16h.01"></path>
                             </svg></div>
                     <div class="callout-title-inner">Alerts abstract</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-info"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts info</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-info"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts info</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-todo"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts todo</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-todo"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts todo</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-tip"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts tip</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-tip"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts tip</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-success"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-check"> <polyline points="20 6 9 17 4 12"></polyline>

</svg></div>

<div class="callout-title-inner">Alerts success</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-success"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-check">
                                     <polyline points="20 6 9 17 4 12"></polyline>
                             </svg></div>
                     <div class="callout-title-inner">Alerts success</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-question"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts question</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-question"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts question</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-warning"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-alert-triangle"> <path

d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z">

</path> <line x1="12" y1="9" x2="12" y2="13"></line> <line x1="12" y1="17" x2="12.01" y2="17"></line>

</svg></div>

<div class="callout-title-inner">Alerts warning</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-warning"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-alert-triangle">
                                     <path
                                             d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z">
                                     </path>
                                     <line x1="12" y1="9" x2="12" y2="13"></line>
                                     <line x1="12" y1="17" x2="12.01" y2="17"></line>
                             </svg></div>
                     <div class="callout-title-inner">Alerts warning</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-failure"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-x"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line>

</svg></div>

<div class="callout-title-inner">Alerts failure</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-failure"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-x">
                                     <line x1="18" y1="6" x2="6" y2="18"></line>
                                     <line x1="6" y1="6" x2="18" y2="18"></line>
                             </svg></div>
                     <div class="callout-title-inner">Alerts failure</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-danger"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-zap"> <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>

</svg></div>

<div class="callout-title-inner">Alerts danger</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-danger"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-zap">
                                     <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                             </svg></div>
                     <div class="callout-title-inner">Alerts danger</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-bug"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts bug</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-bug"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts bug</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-example"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts example</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-example"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts example</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-quote"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-quote"> <path

d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z">

</path> <path

d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z">

</path>

</svg></div>

<div class="callout-title-inner">Alerts quote</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-quote"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-quote">
                                     <path
                                             d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z">
                                     </path>
                                     <path
                                             d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z">
                                     </path>
                             </svg></div>
                     <div class="callout-title-inner">Alerts quote</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>
<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-important"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Alerts important</div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>Lorem ipsum dolor sit amet</p>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="alerts-important"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>
                     <div class="callout-title-inner">Alerts important</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Lorem ipsum dolor sit amet</p>
             </div>
     </div>
</div>



[!color-red]
测试内容

.. note::
Color red


 测试内容

备注

Color orange

测试内容

.. note::
Color orange


 测试内容

备注

Color yellow

测试内容

.. note::
Color yellow


 测试内容

备注

Color green

测试内容

.. note::
Color green


 测试内容

备注

Color cyan

测试内容

.. note::
Color cyan


 测试内容

备注

Color blue

测试内容

.. note::
Color blue


 测试内容

备注

Color purple

测试内容

.. note::
Color purple


 测试内容

备注

Color gray

测试内容

.. note::
Color gray


 测试内容

危险

Color alerts red

测试内容

.. danger::
Color alerts red


 测试内容

备注

Color alerts orange

测试内容

.. note::
Color alerts orange


 测试内容

备注

Color alerts yellow

测试内容

.. note::
Color alerts yellow


 测试内容

备注

Color alerts green

测试内容

.. note::
Color alerts green


 测试内容

备注

Color alerts cyan

测试内容

.. note::
Color alerts cyan


 测试内容

备注

Color alerts blue

测试内容

.. note::
Color alerts blue


 测试内容

备注

Color alerts purple

测试内容

.. note::
Color alerts purple


 测试内容

标题和正文#

小技巧

Callouts can have custom titles, which also supports markdown!

Yes! In a foldable callout, the contents are hidden until it is expanded.

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="faq"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon 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></div>
                     <div class="callout-title-inner">Are callouts foldable?</div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <p>Yes! In a foldable callout, the contents are hidden until it is expanded.</p>
             </div>
     </div>
</div>

嵌套 --

<div>
<div data-callout-metadata="" data-callout-fold="-" data-callout="question"

class="callout is-collapsible is-collapsed"> <div class="callout-title">

<div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon 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></div>

<div class="callout-title-inner">Can callouts be nested? </div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"

viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<div data-callout-metadata="" data-callout-fold="-" data-callout="todo"

class="callout is-collapsible is-collapsed node-insert-event"> <div class="callout-title">

<div class="callout-icon"><svg width="16" height="16"></svg></div> <div class="callout-title-inner">Yes!, they can. </div> <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24"

height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<div data-callout-metadata="" data-callout-fold="-" data-callout="example"

class="callout is-collapsible is-collapsed node-insert-event"> <div class="callout-title">

<div class="callout-icon"><svg width="16" height="16"></svg></div> <div class="callout-title-inner">You can even use multiple layers of

nesting.</div>

<div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg"

width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down"> <polyline points="6 9 12 15 18 9"></polyline>

</svg></div>

</div> <div class="callout-content" style="display: none;">

<p>You can even use multiple layers of nesting.</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div>
     <div data-callout-metadata="" data-callout-fold="-" data-callout="question"
             class="callout is-collapsible is-collapsed">
             <div class="callout-title">
                     <div class="callout-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon 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></div>
                     <div class="callout-title-inner">Can callouts be nested? </div>
                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                     viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                     stroke-linecap="round" stroke-linejoin="round"
                                     class="svg-icon lucide-chevron-down">
                                     <polyline points="6 9 12 15 18 9"></polyline>
                             </svg></div>
             </div>
             <div class="callout-content" style="display: none;">
                     <div data-callout-metadata="" data-callout-fold="-" data-callout="todo"
                             class="callout is-collapsible is-collapsed node-insert-event">
                             <div class="callout-title">
                                     <div class="callout-icon"><svg width="16" height="16"></svg></div>
                                     <div class="callout-title-inner">Yes!, they can. </div>
                                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                                     height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="svg-icon lucide-chevron-down">
                                                     <polyline points="6 9 12 15 18 9"></polyline>
                                             </svg></div>
                             </div>
                             <div class="callout-content" style="display: none;">
                                     <div data-callout-metadata="" data-callout-fold="-" data-callout="example"
                                             class="callout is-collapsible is-collapsed node-insert-event">
                                             <div class="callout-title">
                                                     <div class="callout-icon"><svg width="16" height="16"></svg></div>
                                                     <div class="callout-title-inner">You can even use multiple layers of
                                                             nesting.</div>
                                                     <div class="callout-fold"><svg xmlns="http://www.w3.org/2000/svg"
                                                                     width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                                     stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                                     stroke-linejoin="round" class="svg-icon lucide-chevron-down">
                                                                     <polyline points="6 9 12 15 18 9"></polyline>
                                                             </svg></div>
                                             </div>
                                             <div class="callout-content" style="display: none;">
                                                     <p>You can even use multiple layers of nesting.</p>
                                             </div>
                                     </div>
                             </div>
                     </div>
             </div>
     </div>
</div>