diff --git a/docs/docs/components/code-demo.md b/docs/docs/components/code-demo.md
index a136d3ef3..c89ce76ef 100644
--- a/docs/docs/components/code-demo.md
+++ b/docs/docs/components/code-demo.md
@@ -15,13 +15,9 @@ layout: component
 
 This component is used right here in the docs to render code examples.
 
-<wa-callout variant="danger">
-  <wa-icon name="circle-exclamation" slot="icon" variant="regular"></wa-icon>
-
-Do not render untrusted content in a `<wa-code-demo>` element.
-This component renders the content as HTML, which introduces XSS vulnerabilities if used with untrusted content.
-
-</wa-callout>
+:::warning
+Do not render untrusted content in a `<wa-code-demo>` element. This component renders the content as HTML, which introduces XSS vulnerabilities if used with untrusted content.
+:::
 
 ## Examples
 
diff --git a/docs/docs/components/viewport-demo.md b/docs/docs/components/viewport-demo.md
index 06441e6bb..4f9ec5b1b 100644
--- a/docs/docs/components/viewport-demo.md
+++ b/docs/docs/components/viewport-demo.md
@@ -10,12 +10,9 @@ layout: component
 </wa-viewport-demo>
 ```
 
-<wa-callout variant="danger">
-  <wa-icon name="circle-exclamation" slot="icon" variant="regular"></wa-icon>
-
+:::warning
 A lot of the functionality of this component will not work on cross-origin iframes.
-
-</wa-callout>
+:::
 
 ## Examples