diff --git a/elements/rh-badge/demo/critical.html b/elements/rh-badge/demo/critical.html
new file mode 100644
index 0000000000..8b4f61b6b9
--- /dev/null
+++ b/elements/rh-badge/demo/critical.html
@@ -0,0 +1,14 @@
+<rh-badge number="7" state="critical">7</rh-badge>
+<rh-badge number="24" state="critical">24</rh-badge>
+<rh-badge number="240" state="critical">240</rh-badge>
+<rh-badge threshold="900" number="999" state="critical">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>
+
+<style>
+  [data-demo="rh-badge"] {
+    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+  }
+</style>
diff --git a/elements/rh-badge/demo/demo.css b/elements/rh-badge/demo/demo.css
deleted file mode 100644
index 28c0ff769a..0000000000
--- a/elements/rh-badge/demo/demo.css
+++ /dev/null
@@ -1,25 +0,0 @@
-section,
-rh-context-provider {
-  padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
-}
-
-h2 {
-  padding-inline-start: var(--rh-space-3xl, 48px);
-}
-
-dl {
-  display: grid;
-  padding-block: var(--rh-space-2xl, 32px);
-  padding-inline: var(--rh-space-3xl, 48px);
-  grid-template-columns: max-content 1fr;
-  gap: var(--rh-space-xl, 24px);
-}
-
-dt {
-  font-size: var(--rh-font-size-heading-xs, 1.25rem);
-  font-weight: var(--rh-font-weight-heading-bold, 700);
-}
-
-dd {
-  margin: 0;
-}
diff --git a/elements/rh-badge/demo/important.html b/elements/rh-badge/demo/important.html
new file mode 100644
index 0000000000..317ba497e9
--- /dev/null
+++ b/elements/rh-badge/demo/important.html
@@ -0,0 +1,14 @@
+<rh-badge number="7" state="important">7</rh-badge>
+<rh-badge number="24" state="important">24</rh-badge>
+<rh-badge number="240" state="important">240</rh-badge>
+<rh-badge threshold="900" number="999" state="important">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>
+
+<style>
+  [data-demo="rh-badge"] {
+    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+  }
+</style>
diff --git a/elements/rh-badge/demo/info.html b/elements/rh-badge/demo/info.html
new file mode 100644
index 0000000000..1ef00094b5
--- /dev/null
+++ b/elements/rh-badge/demo/info.html
@@ -0,0 +1,14 @@
+<rh-badge number="7" state="info">7</rh-badge>
+<rh-badge number="24" state="info">24</rh-badge>
+<rh-badge number="240" state="info">240</rh-badge>
+<rh-badge threshold="900" number="999" state="info">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>
+
+<style>
+  [data-demo="rh-badge"] {
+    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+  }
+</style>
diff --git a/elements/rh-badge/demo/moderate.html b/elements/rh-badge/demo/moderate.html
new file mode 100644
index 0000000000..203dedb68a
--- /dev/null
+++ b/elements/rh-badge/demo/moderate.html
@@ -0,0 +1,14 @@
+<rh-badge number="7" state="moderate">7</rh-badge>
+<rh-badge number="24" state="moderate">24</rh-badge>
+<rh-badge number="240" state="moderate">240</rh-badge>
+<rh-badge threshold="900" number="999" state="moderate">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>
+
+<style>
+  [data-demo="rh-badge"] {
+    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+  }
+</style>
diff --git a/elements/rh-badge/demo/rh-badge.html b/elements/rh-badge/demo/rh-badge.html
index 8777825bd0..2fc3099410 100644
--- a/elements/rh-badge/demo/rh-badge.html
+++ b/elements/rh-badge/demo/rh-badge.html
@@ -1,66 +1,14 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="rh-badge.js"></script>
-
-<dl>
-  <dt>State: Default</dt>
-  <dd>
-    <rh-badge number="7">7</rh-badge>
-    <rh-badge number="24">24</rh-badge>
-    <rh-badge number="240">240</rh-badge>
-    <rh-badge threshold="900" number="999">999</rh-badge>
-  </dd>
-
-  <dt>State: Info</dt>
-  <dd>
-    <rh-badge number="7" state="info">7</rh-badge>
-    <rh-badge number="24" state="info">24</rh-badge>
-    <rh-badge number="240" state="info">240</rh-badge>
-    <rh-badge threshold="900" number="999" state="info">999</rh-badge>
-  </dd>
-
-  <dt>State: Success</dt>
-  <dd>
-    <rh-badge number="7" state="success">7</rh-badge>
-    <rh-badge number="24" state="success">24</rh-badge>
-    <rh-badge number="240" state="success">240</rh-badge>
-    <rh-badge threshold="900" number="999" state="success">999</rh-badge>
-  </dd>
-
-  <dt>State: Moderate</dt>
-  <dd>
-    <rh-badge number="7" state="moderate">7</rh-badge>
-    <rh-badge number="24" state="moderate">24</rh-badge>
-    <rh-badge number="240" state="moderate">240</rh-badge>
-    <rh-badge threshold="900" number="999" state="moderate">999</rh-badge>
-  </dd>
-
-  <dt>State: Important</dt>
-  <dd>
-    <rh-badge number="7" state="important">7</rh-badge>
-    <rh-badge number="24" state="important">24</rh-badge>
-    <rh-badge number="240" state="important">240</rh-badge>
-    <rh-badge threshold="900" number="999" state="important">999</rh-badge>
-  </dd>
-
-  <dt>State: Critical</dt>
-  <dd>
-    <rh-badge number="7" state="critical">7</rh-badge>
-    <rh-badge number="24" state="critical">24</rh-badge>
-    <rh-badge number="240" state="critical">240</rh-badge>
-    <rh-badge threshold="900" number="999" state="critical">999</rh-badge>
-  </dd>
-
-  <dt>Threshold exceeded</dt>
-  <dd>
-    <rh-badge number="900" threshold="100">900</rh-badge> (Threshold = 100)
-    <p>Should add '+' sign if the value exceeds the threshold</p>
-  </dd>
-
-  <dt>Threshold not exceeded</dt>
-  <dd>
-    <rh-badge number="900" threshold="1000">900</rh-badge>
-    (Threshold = 10000)
-    <p>Shouldn't add a '+' sign if the value doesn't exceed the threshold</p>
-  </dd>
-</dl>
-
+<rh-badge number="7">7</rh-badge>
+<rh-badge number="24">24</rh-badge>
+<rh-badge number="240">240</rh-badge>
+<rh-badge threshold="900" number="999">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>
+
+<style>
+  [data-demo="rh-badge"] {
+    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+  }
+</style>
diff --git a/elements/rh-badge/demo/rh-badge.js b/elements/rh-badge/demo/rh-badge.js
deleted file mode 100644
index 11ef50775c..0000000000
--- a/elements/rh-badge/demo/rh-badge.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import '@rhds/elements/rh-badge/rh-badge.js';
-
-const root = document.querySelector('[data-demo="rh-badge"]')?.shadowRoot ?? document;
-
-root.querySelector('rh-badge');
diff --git a/elements/rh-badge/demo/success.html b/elements/rh-badge/demo/success.html
new file mode 100644
index 0000000000..cb69a5965f
--- /dev/null
+++ b/elements/rh-badge/demo/success.html
@@ -0,0 +1,14 @@
+<rh-badge number="7" state="success">7</rh-badge>
+<rh-badge number="24" state="success">24</rh-badge>
+<rh-badge number="240" state="success">240</rh-badge>
+<rh-badge threshold="900" number="999" state="success">999</rh-badge>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>
+
+<style>
+  [data-demo="rh-badge"] {
+    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+  }
+</style>
diff --git a/elements/rh-badge/demo/threshold.html b/elements/rh-badge/demo/threshold.html
new file mode 100644
index 0000000000..44a51c596c
--- /dev/null
+++ b/elements/rh-badge/demo/threshold.html
@@ -0,0 +1,12 @@
+<rh-badge number="900" threshold="100">900</rh-badge> (Threshold = 100)
+<p>Should add '+' sign if the value exceeds the threshold</p>
+
+<script type="module">
+  import '@rhds/elements/rh-badge/rh-badge.js';
+</script>
+
+<style>
+  [data-demo="rh-badge"] {
+    padding: var(--rh-space-xl, 24px) var(--rh-space-4xl, 64px);
+  }
+</style>