feat(callout): revamp of the callouts (#767)

* feat(callout): revamp of the callouts

* fix: doc

* chore: refactor gh alert

* feat: same colors on callouts and gh alerts

* docs: more relevant examples

* docs: i18n

* docs: update existing callouts

exampleSite/content/docs/guide/deploy-site.ja.md

@@ -101,7 +101,7 @@ jobs:
 {{% /details %}}
 
 
-{{< callout >}}
+{{< callout type="warning" >}}
   リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
   ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
 {{< /callout >}}

exampleSite/content/docs/guide/deploy-site.md

@@ -102,7 +102,7 @@ jobs:
 {{% /details %}}
 
 
-{{< callout >}}
+{{< callout type="warning" >}}
   In your repository settings, set the **Pages** > **Build and deployment** > **Source** to **GitHub Actions**:
   ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
 {{< /callout >}}

exampleSite/content/docs/guide/deploy-site.zh-cn.md

@@ -102,7 +102,7 @@ jobs:
 {{% /details %}}
 
 
-{{< callout >}}
+{{< callout type="warning" >}}
   在仓库设置中，将 **Pages** > **构建与部署** > **源** 设为 **GitHub Actions**：
   ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
 {{< /callout >}}

exampleSite/content/docs/guide/organize-files.fa.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   توصیه می‌شود نوار کناری را خیلی عمیق نگه ندارید. اگر محتوای زیادی دارید، **آن‌ها را به چند بخش تقسیم کنید**.
 {{< /callout >}}
 

exampleSite/content/docs/guide/organize-files.ja.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   サイドバーを深くしすぎないことをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
 {{< /callout >}}
 

exampleSite/content/docs/guide/organize-files.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   It is recommended to keep the sidebar not too deep. If you have a lot of content, consider **splitting them into multiple sections**.
 {{< /callout >}}
 

exampleSite/content/docs/guide/organize-files.zh-cn.md

@@ -78,7 +78,7 @@ weight: 2
 ---
 ```
 
-{{< callout emoji="ℹ️">}}
+{{< callout type="info" >}}
   建议不要让侧边栏过深。如果有大量内容，可以考虑**将其拆分为多个部分**。
 {{< /callout >}}
 

exampleSite/content/docs/guide/shortcodes/callout.fa.md

@@ -14,24 +14,44 @@ prev: /docs/guide/shortcodes
 > [هشدارهای سبک GitHub](../../markdown#alerts) از [نسخه 0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) پشتیبانی می‌شوند.
 > این ویژگی از سینتکس Markdown برای رندر کردن callout استفاده می‌کند که باعث بهبود قابلیت حمل و خوانایی محتوا می‌شود.
 
-##   أمثلة
+## أمثلة
+
+{{< callout >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+{{< callout type="important" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
 
 ### تقصير
 
-{{< callout emoji="🌐">}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+{{< callout >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+{{</* callout */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{</* /callout */>}}
 ```
 
-### معلومات
+### Info
 
 {{< callout type="info" >}}
-  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
@@ -40,27 +60,83 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### تحذير
+### Warning
 
 {{< callout type="warning" >}}
-  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
 {{</* callout type="warning" */>}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{</* /callout */>}}
 ```
 
-### خطأ
+### Error
 
 {{< callout type="error" >}}
- **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه. 
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{< /callout >}}
 
 ```markdown
 {{</* callout type="error" */>}}
-**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.  
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+### Important
+
+{{< callout type="important" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+### أيقونة مخصصة
+
+{{< callout icon="sparkles" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+### الرموز التعبيرية
+
+{{< callout emoji="🌐" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  **الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
 {{</* /callout */>}}
 ```
 

exampleSite/content/docs/guide/shortcodes/callout.ja.md

@@ -16,22 +16,42 @@ prev: /docs/guide/shortcodes
 
 ## 例
 
+{{< callout >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="info" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+{{< callout type="important" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
 ### デフォルト
 
-{{< callout emoji="🌐">}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< callout >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
-    **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* callout */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
 {{</* /callout */>}}
 ```
 
-### 情報
+### Info
 
 {{< callout type="info" >}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
@@ -40,10 +60,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### 警告
+### Warning
 
 {{< callout type="warning" >}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
@@ -52,10 +72,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### エラー
+### Error
 
 {{< callout type="error" >}}
-  **コールアウト** は注目を集めることを目的とした短いテキストです。
+**コールアウト** は注目を集めることを目的とした短いテキストです。
 {{< /callout >}}
 
 ```markdown
@@ -64,6 +84,62 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
+### Important
+
+{{< callout type="important" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+### カスタムアイコン
+
+{{< callout icon="sparkles" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+### 絵文字
+
+{{< callout emoji="🌐" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+**コールアウト** は注目を集めることを目的とした短いテキストです。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  **コールアウト** は注目を集めることを目的とした短いテキストです。
+{{</* /callout */>}}
+```
+
 ## オプション
 
 | パラメータ   | 説明                                          |

exampleSite/content/docs/guide/shortcodes/callout.md

@@ -16,15 +16,35 @@ A built-in component to show important information to the reader.
 
 ## Examples
 
+{{< callout >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="info" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="error" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+{{< callout type="important" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
 ### Default
 
-{{< callout emoji="🌐">}}
+{{< callout >}}
   A **callout** is a short piece of text intended to attract attention.
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
-    A **callout** is a short piece of text intended to attract attention.
+{{</* callout */>}}
+  A **callout** is a short piece of text intended to attract attention.
 {{</* /callout */>}}
 ```
 
@@ -64,10 +84,66 @@ A built-in component to show important information to the reader.
 {{</* /callout */>}}
 ```
 
+### Important
+
+{{< callout type="important" >}}
+  A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+### Custom Icon
+
+{{< callout icon="sparkles" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+### Emoji
+
+{{< callout emoji="🌐" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+A **callout** is a short piece of text intended to attract attention.
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  A **callout** is a short piece of text intended to attract attention.
+{{</* /callout */>}}
+```
+
 ## Options
 
-| Parameter | Description                                                          |
-|-----------|----------------------------------------------------------------------|
-| `type`    | The type of callout. (default, `info`, `warning`, `error`)           |
-| `emoji`   | The emoji to show before the callout.                                |
-| `icon`    | The emoji of the callout (related to type or can be a custom emoji). |
+| Parameter | Description                                                                     |
+|-----------|---------------------------------------------------------------------------------|
+| `type`    | The type of callout. (default, `info`, `warning`, `error`, `important`)         |
+| `emoji`   | The emoji to show before the callout.                                           |
+| `icon`    | The icon to show before the callout. (related to type or can be a custom icon). |

exampleSite/content/docs/guide/shortcodes/callout.zh-cn.md

@@ -16,22 +16,42 @@ prev: /docs/guide/shortcodes
 
 ## 示例
 
+{{< callout >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="info" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="warning" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="error" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+{{< callout type="important" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
 ### 默认
 
-{{< callout emoji="🌐">}}
-  **标注** 是一小段旨在吸引注意力的文字。
+{{< callout >}}
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
-{{</* callout emoji="🌐" */>}}
-    **标注** 是一小段旨在吸引注意力的文字。
+{{</* callout */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
 {{</* /callout */>}}
 ```
 
-### 信息
+### Info
 
 {{< callout type="info" >}}
-  **标注** 是一小段旨在吸引注意力的文字。
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
@@ -40,10 +60,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### 警告
+### Warning
 
 {{< callout type="warning" >}}
-  **标注** 是一小段旨在吸引注意力的文字。
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
@@ -52,10 +72,10 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
-### 错误
+### Error
 
 {{< callout type="error" >}}
-  **标注** 是一小段旨在吸引注意力的文字。
+**标注** 是一小段旨在吸引注意力的文字。
 {{< /callout >}}
 
 ```markdown
@@ -64,6 +84,62 @@ prev: /docs/guide/shortcodes
 {{</* /callout */>}}
 ```
 
+### Important
+
+{{< callout type="important" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" */>}} 
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+### 自定义图标
+
+{{< callout icon="sparkles" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout icon="sparkles" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+{{< callout type="important" icon="sparkles" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="important" icon="sparkles" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+### 表情符号
+
+{{< callout emoji="🌐" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout emoji="🌐" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
+{{< callout type="info" emoji="ℹ️" >}}
+**标注** 是一小段旨在吸引注意力的文字。
+{{< /callout >}}
+
+```markdown
+{{</* callout type="info" emoji="ℹ️" */>}}
+  **标注** 是一小段旨在吸引注意力的文字。
+{{</* /callout */>}}
+```
+
 ## 选项
 
 | 范围      | 描述                         |

exampleSite/content/docs/guide/shortcodes/jupyter.fa.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
+{{< callout type="warning" >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) یک برنامه نوت‌بوک HTML مستقل از زبان برای [پروژه Jupyter](https://jupyter.org/) است. این برنامه به شما امکان می‌دهد اسنادی ایجاد و به اشتراک بگذارید که شامل کد زنده، معادلات، تصاویر و متن روایی هستند.
 

exampleSite/content/docs/guide/shortcodes/jupyter.ja.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
+{{< callout type="warning" >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語非依存な HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成・共有できます。
 

exampleSite/content/docs/guide/shortcodes/jupyter.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
+{{< callout type="warning" >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) is a language-agnostic HTML notebook application for [Project Jupyter](https://jupyter.org/). It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.
 

exampleSite/content/docs/guide/shortcodes/jupyter.zh-cn.md

@@ -6,7 +6,7 @@ sidebar:
   exclude: true
 ---
 
-{{< callout >}}实验性功能：通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
+{{< callout type="warning" >}}实验性功能：通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
 
 [Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 推出的语言无关的 HTML 笔记本应用。它允许你创建和分享包含动态代码、数学公式、可视化图表和叙述性文本的文档。
 

exampleSite/content/docs/guide/shortcodes/others.fa.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   برخی از این‌ها شورتکدهای داخلی Hugo هستند.
   این شورتکدها کمتر پایدار در نظر گرفته می‌شوند و ممکن است هر زمان تغییر کنند.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/others.ja.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   これらの一部は Hugo 組み込みのショートコードです。
   これらのショートコードは安定性が低く、いつでも変更される可能性があります。
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/others.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   Some of these are Hugo built-in shortcodes.
   These shortcodes are considered less stable and may be changed anytime.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/others.zh-cn.md

@@ -6,7 +6,7 @@ sidebar:
 next: /docs/guide/deploy-site
 ---
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   其中部分为Hugo内置短代码。
   这些短代码稳定性较低，可能随时变更。
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.fa.md

@@ -25,7 +25,7 @@ title: مراحل
 
 ## نحوه استفاده
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   لطفاً توجه داشته باشید که این شورتکد **فقط برای محتوای Markdown** طراحی شده است.
   اگر محتوای HTML یا شورتکدهای دیگر را به عنوان محتوای مرحله قرار دهید، ممکن است به درستی نمایش داده نشود.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.ja.md

@@ -25,7 +25,7 @@ title: ステップ
 
 ## 使い方
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   このショートコードは **Markdown コンテンツ専用** であることに注意してください。
   HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.md

@@ -25,7 +25,7 @@ This is the third step.
 
 ## Usage
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   Please note that this shortcode is intended **only for Markdown content**.
   If you put HTML content or other shortcodes as step content, it may not render as expected.
 {{< /callout >}}

exampleSite/content/docs/guide/shortcodes/steps.zh-cn.md

@@ -25,7 +25,7 @@ title: 步骤
 
 ## 使用方法
 
-{{< callout emoji="ℹ️" >}}
+{{< callout type="warning" >}}
   请注意，此短代码**仅适用于Markdown内容**。
   如果在步骤内容中放入HTML或其他短代码，可能无法按预期渲染。
 {{< /callout >}}