diff --git a/source/_dashboards/markdown.markdown b/source/_dashboards/markdown.markdown
index 42fe092b7b2..c6b39eceadc 100644
--- a/source/_dashboards/markdown.markdown
+++ b/source/_dashboards/markdown.markdown
@@ -116,3 +116,23 @@ content: |
```
{% endraw %}
+
+
+## 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.
+
+
+
+Screenshot of the ha-alert elements in a markdown card.
+
+
+```yaml
+type: markdown
+content: |
+ This is an error alert — check it out!
+ This is a warning alert — check it out!
+ This is an info alert — check it out!
+ This is a success alert — check it out!
+ This is an alert with a title
+```
diff --git a/source/images/dashboards/lovelace_markdown_ha-alert.png b/source/images/dashboards/lovelace_markdown_ha-alert.png
new file mode 100644
index 00000000000..9fce03b6adf
Binary files /dev/null and b/source/images/dashboards/lovelace_markdown_ha-alert.png differ