diff --git a/gallery/src/pages/lovelace/markdown-card.ts b/gallery/src/pages/lovelace/markdown-card.ts
index 2b6257cd23..1abca4bdcc 100644
--- a/gallery/src/pages/lovelace/markdown-card.ts
+++ b/gallery/src/pages/lovelace/markdown-card.ts
@@ -9,7 +9,7 @@ const CONFIGS = [
     heading: "markdown-it demo",
     config: `
 - type: markdown
-  content: >
+  content: >-
     # h1 Heading 8-)
 
     ## h2 Heading
@@ -249,6 +249,17 @@ const CONFIGS = [
     ::: warning
     *here be dragons*
     :::
+
+    ### ha-alert
+
+    You can use our [\`ha-alert\`](https://design.home-assistant.io/#components/ha-alert) component in markdown content rendered in the Home Assistant Frontend.
+
+    <ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
+    <ha-alert alert-type="warning">This is a warning alert — check it out!</ha-alert>
+    <ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
+    <ha-alert alert-type="success">This is a success alert — check it out!</ha-alert>
+    <ha-alert title="Test alert">This is an alert with a title</ha-alert>
+
     `,
   },
 ];
diff --git a/src/resources/markdown_worker.ts b/src/resources/markdown_worker.ts
index 38a069c1d7..a69bd9c02e 100644
--- a/src/resources/markdown_worker.ts
+++ b/src/resources/markdown_worker.ts
@@ -47,6 +47,7 @@ const renderMarkdown = (
       input: ["type", "disabled", "checked"],
       "ha-icon": ["icon"],
       "ha-svg-icon": ["path"],
+      "ha-alert": ["alert-type", "title"],
     };
   }