Vuepress Alerts

vSeasky大约 70 分钟Vuepress 学习笔记Vuepress

Vuepress 笔记

使用callouts

callout 默认类型

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

有如下类型可供使用：

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

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="note" class="callout">
		<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"> 有如下类型可供使用：</div>
		</div>
		<div class="callout-content">
			<ul class="has-list-bullet">
				<li data-line="1">
					<div class="list-bullet"></div>note、abstract、info、todo、tip、success、question
				</li>
				<li data-line="2">
					<div class="list-bullet"></div>warning、failure、danger、bug、example、quote
				</li>
			</ul>
		</div>
	</div>
</div>

标准

Note

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="note" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Abstract

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="abstract" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Info

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="info" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Todo

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="todo" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Tip

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="tip" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Success

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="success" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Question

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="question" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Warning

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="warning" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Failure

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="failure" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Danger

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="danger" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Bug

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="bug" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Example

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="example" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Quote

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="quote" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Important

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="important" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

下拉

Note

<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>

Abstract

<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>

Info

<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>

Todo

<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>

Tip

<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>

Success

<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>

Question

<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>

Warning

<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>

Failure

<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>

Danger

<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>

Bug

<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>

Example

<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>

Quote

<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>

Important

<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

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-note" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts abstract

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-abstract"
		class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts info

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-info" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts todo

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-todo" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts tip

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-tip" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts success

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-success"
		class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts question

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-question"
		class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts warning

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-warning"
		class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts failure

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-failure"
		class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts danger

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-danger" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts bug

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-bug" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts example

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-example"
		class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts quote

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-quote" class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

Alerts important

Lorem ipsum dolor sit amet

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="alerts-important"
		class="callout">
		<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>
		<div class="callout-content">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
	</div>
</div>

下拉

Alerts note

<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>

Alerts abstract

<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>

Alerts info

<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>

Alerts todo

<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>

Alerts tip

<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>

Alerts success

<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>

Alerts question

<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>

Alerts warning

<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>

Alerts failure

<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>

Alerts danger

<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>

Alerts bug

<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>

Alerts example

<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>

Alerts quote

<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>

Alerts important

<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]
测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-red" class="callout">
		<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">Color red</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color orange

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-orange" class="callout">
		<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">Color orange</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color yellow

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-yellow" class="callout">
		<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">Color yellow</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color green

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-green" class="callout">
		<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">Color green</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color cyan

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-cyan" class="callout">
		<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">Color cyan</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color blue

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-blue" class="callout">
		<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">Color blue</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color purple

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-purple" class="callout">
		<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">Color purple</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color gray

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-gray" class="callout">
		<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">Color gray</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color alerts red

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-alerts-red"
		class="callout">
		<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">Color alerts red</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color alerts orange

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-alerts-orange"
		class="callout">
		<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">Color alerts orange</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color alerts yellow

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-alerts-yellow"
		class="callout">
		<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">Color alerts yellow</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color alerts green

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-alerts-green"
		class="callout">
		<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">Color alerts green</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color alerts cyan

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-alerts-cyan"
		class="callout">
		<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">Color alerts cyan</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color alerts blue

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-alerts-blue"
		class="callout">
		<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">Color alerts blue</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

Color alerts purple

测试内容

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="color-alerts-purple"
		class="callout">
		<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">Color alerts purple</div>
		</div>
		<div class="callout-content">
			<p>测试内容</p>
		</div>
	</div>
</div>

标题和正文

Callouts can have custom titles, which also supports markdown!

<div>
	<div data-callout-metadata="" data-callout-fold="" data-callout="tip" class="callout">
		<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">Callouts can have custom titles, which also supports
				markdown!</div>
		</div>
	</div>
</div>

折叠

Are callouts foldable?

<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>

嵌套

Can callouts be nested?

<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>