diff --git a/packages/core/src/stories/utility/utility-classes/align.stories.mdx b/packages/core/src/stories/utility/utility-classes/align.stories.mdx
deleted file mode 100644
index eb74c96e0..000000000
--- a/packages/core/src/stories/utility/utility-classes/align.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-<Meta title="Utilities/Utility Classes/Align" />
-
-```css
-.tds-u-align-start {
-  align-items: start !important;
-}
-
-.tds-u-align-center {
-  align-items: center !important;
-}
-
-.tds-u-align-end {
-  align-items: end !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/align.stories.ts b/packages/core/src/stories/utility/utility-classes/align.stories.ts
new file mode 100644
index 000000000..3dac0e415
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/align.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Align',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Align = {
+  render: () => {
+    const code = `
+      .tds-u-align-start {
+        align-items: start !important;
+      }
+
+      .tds-u-align-center {
+        align-items: center !important;
+      }
+
+      .tds-u-align-end {
+        align-items: end !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/display.stories.mdx b/packages/core/src/stories/utility/utility-classes/display.stories.mdx
deleted file mode 100644
index b647455e7..000000000
--- a/packages/core/src/stories/utility/utility-classes/display.stories.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-<Meta title="Utilities/Utility Classes/Display" />
-
-```css
-.tds-u-flex {
-  display: flex !important;
-}
-
-.tds-u-inline-flex {
-  display: inline-flex;
-}
-
-.tds-u-block {
-  display: block !important;
-}
-
-.tds-u-inline-block {
-  display: inline-block !important;
-}
-
-.tds-u-grid {
-  display: grid !important;
-}
-
-.tds-u-display-none {
-  display: none !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/display.stories.ts b/packages/core/src/stories/utility/utility-classes/display.stories.ts
new file mode 100644
index 000000000..afc110e6c
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/display.stories.ts
@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Display',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Display = {
+  render: () => {
+    const code = `
+      .tds-u-flex {
+        display: flex !important;
+      }
+
+      .tds-u-inline-flex {
+        display: inline-flex;
+      }
+
+      .tds-u-block {
+        display: block !important;
+      }
+
+      .tds-u-inline-block {
+        display: inline-block !important;
+      }
+
+      .tds-u-grid {
+        display: grid !important;
+      }
+
+      .tds-u-display-none {
+        display: none !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/flex.stories.mdx b/packages/core/src/stories/utility/utility-classes/flex.stories.mdx
deleted file mode 100644
index a02ab53d9..000000000
--- a/packages/core/src/stories/utility/utility-classes/flex.stories.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-<Meta title="Utilities/Utility Classes/Flex" />
-
-```css
-.tds-u-flex-start {
-  display: flex !important;
-  justify-content: flex-start !important;
-}
-
-.tds-u-flex-end {
-  display: flex !important;
-  justify-content: flex-end !important;
-}
-
-.tds-u-flex-center {
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-}
-
-.tds-u-flex-dir-col {
-  flex-direction: column !important;
-}
-
-.tds-u-flex-wrap {
-  flex-wrap: wrap !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/flex.stories.ts b/packages/core/src/stories/utility/utility-classes/flex.stories.ts
new file mode 100644
index 000000000..cdb75d673
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/flex.stories.ts
@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Flex',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Flex = {
+  render: () => {
+    const code = `
+      .tds-u-flex-start {
+        display: flex !important;
+        justify-content: flex-start !important;
+      }
+
+      .tds-u-flex-end {
+        display: flex !important;
+        justify-content: flex-end !important;
+      }
+
+      .tds-u-flex-center {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+      }
+
+      .tds-u-flex-dir-col {
+        flex-direction: column !important;
+      }
+
+      .tds-u-flex-wrap {
+        flex-wrap: wrap !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/float.stories.mdx b/packages/core/src/stories/utility/utility-classes/float.stories.mdx
deleted file mode 100644
index b8dca898d..000000000
--- a/packages/core/src/stories/utility/utility-classes/float.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-<Meta title="Utilities/Utility Classes/Float" />
-
-```css
-.tds-u-float-right {
-  float: right !important;
-}
-
-.tds-u-float-left {
-  float: left !important;
-}
-
-.tds-u-float-none {
-  float: none !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/float.stories.ts b/packages/core/src/stories/utility/utility-classes/float.stories.ts
new file mode 100644
index 000000000..adc024bb8
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/float.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Float',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Float = {
+  render: () => {
+    const code = `
+      .tds-u-float-right {
+        float: right !important;
+      }
+
+      .tds-u-float-left {
+        float: left !important;
+      }
+
+      .tds-u-float-none {
+        float: none !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/gap.stories.mdx b/packages/core/src/stories/utility/utility-classes/gap.stories.mdx
deleted file mode 100644
index 092c62a39..000000000
--- a/packages/core/src/stories/utility/utility-classes/gap.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-<Meta title="Utilities/Utility Classes/Gap" />
-
-```css
-.tds-u-gap1 {
-  gap: 8px !important;
-}
-
-.tds-u-gap2 {
-  gap: 16px !important;
-}
-
-.tds-u-gap3 {
-  gap: 24px !important;
-}
-
-.tds-u-gap4 {
-  gap: 32px !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/gap.stories.ts b/packages/core/src/stories/utility/utility-classes/gap.stories.ts
new file mode 100644
index 000000000..9b82c30e6
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/gap.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Gap',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Gap = {
+  render: () => {
+    const code = `
+      .tds-u-gap1 {
+        gap: 8px !important;
+      }
+
+      .tds-u-gap2 {
+        gap: 16px !important;
+      }
+
+      .tds-u-gap3 {
+        gap: 24px !important;
+      }
+
+      .tds-u-gap4 {
+        gap: 32px !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/height.stories.mdx b/packages/core/src/stories/utility/utility-classes/height.stories.mdx
deleted file mode 100644
index 76c514462..000000000
--- a/packages/core/src/stories/utility/utility-classes/height.stories.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-<Meta title="Utilities/Utility Classes/Height" />
-
-```css
-.tds-u-h-auto {
-  height: auto !important;
-}
-
-.tds-u-h-100 {
-  height: 100% !important;
-}
-
-.tds-u-h-75 {
-  height: 75% !important;
-}
-
-.tds-u-h-50 {
-  height: 50% !important;
-}
-
-.tds-u-h-25 {
-  height: 25% !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/height.stories.ts b/packages/core/src/stories/utility/utility-classes/height.stories.ts
new file mode 100644
index 000000000..8e310e3af
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/height.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Height',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Height = {
+  render: () => {
+    const code = `     
+      .tds-u-h-auto {
+        height: auto !important;
+      }
+
+      .tds-u-h-100 {
+        height: 100% !important;
+      }
+
+      .tds-u-h-75 {
+        height: 75% !important;
+      }
+
+      .tds-u-h-50 {
+        height: 50% !important;
+      }
+
+      .tds-u-h-25 {
+        height: 25% !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/justify.stories.mdx b/packages/core/src/stories/utility/utility-classes/justify.stories.mdx
deleted file mode 100644
index dff767e53..000000000
--- a/packages/core/src/stories/utility/utility-classes/justify.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-<Meta title="Utilities/Utility Classes/Justify" />
-
-```css
-.tds-u-justify-between {
-  justify-content: space-between !important;
-}
-
-.tds-u-justify-around {
-  justify-content: space-around !important;
-}
-
-.tds-u-justify-center {
-  justify-content: center !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/justify.stories.ts b/packages/core/src/stories/utility/utility-classes/justify.stories.ts
new file mode 100644
index 000000000..484bce1d6
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/justify.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Justify',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Justify = {
+  render: () => {
+    const code = `
+      .tds-u-justify-between {
+        justify-content: space-between !important;
+      }
+
+      .tds-u-justify-around {
+        justify-content: space-around !important;
+      }
+
+      .tds-u-justify-center {
+        justify-content: center !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/margin.stories.mdx b/packages/core/src/stories/utility/utility-classes/margin.stories.mdx
deleted file mode 100644
index 6a0fabb9d..000000000
--- a/packages/core/src/stories/utility/utility-classes/margin.stories.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
-<Meta title="Utilities/Utility Classes/Margin" />
-
-```css
-.tds-u-m0 {
-  margin: 0 !important;
-}
-
-.tds-u-mt0 {
-  margin-top: 0 !important;
-}
-
-.tds-u-mr0 {
-  margin-right: 0 !important;
-}
-
-.tds-u-mb0 {
-  margin-bottom: 0 !important;
-}
-
-.tds-u-ml0 {
-  margin-left: 0 !important;
-}
-
-.tds-u-m1 {
-  margin: 8px !important;
-}
-
-.tds-u-mt1 {
-  margin-top: 8px !important;
-}
-
-.tds-u-mr1 {
-  margin-right: 8px !important;
-}
-
-.tds-u-mb1 {
-  margin-bottom: 8px !important;
-}
-
-.tds-u-ml1 {
-  margin-left: 8px !important;
-}
-
-.tds-u-m2 {
-  margin: 16px !important;
-}
-
-.tds-u-mt2 {
-  margin-top: 16px !important;
-}
-
-.tds-u-mr2 {
-  margin-right: 16px !important;
-}
-
-.tds-u-mb2 {
-  margin-bottom: 16px !important;
-}
-
-.tds-u-ml2 {
-  margin-left: 16px !important;
-}
-
-.tds-u-m3 {
-  margin: 24px !important;
-}
-
-.tds-u-mt3 {
-  margin-top: 24px !important;
-}
-
-.tds-u-mr3 {
-  margin-right: 24px !important;
-}
-
-.tds-u-mb3 {
-  margin-bottom: 24px !important;
-}
-
-.tds-u-ml3 {
-  margin-left: 24px !important;
-}
-
-.tds-u-m-auto {
-  margin: auto !important;
-}
-
-.tds-u-mt-auto {
-  margin-top: auto !important;
-}
-
-.tds-u-mr-auto {
-  margin-right: auto !important;
-}
-
-.tds-u-ml-auto {
-  margin-left: auto !important;
-}
-
-.tds-u-mb-auto {
-  margin-bottom: auto !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/margin.stories.ts b/packages/core/src/stories/utility/utility-classes/margin.stories.ts
new file mode 100644
index 000000000..3f0b9efab
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/margin.stories.ts
@@ -0,0 +1,125 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Margin',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Margin = {
+  render: () => {
+    const code = `      
+      .tds-u-m0 {
+        margin: 0 !important;
+      }
+
+      .tds-u-mt0 {
+        margin-top: 0 !important;
+      }
+
+      .tds-u-mr0 {
+        margin-right: 0 !important;
+      }
+
+      .tds-u-mb0 {
+        margin-bottom: 0 !important;
+      }
+
+      .tds-u-ml0 {
+        margin-left: 0 !important;
+      }
+
+      .tds-u-m1 {
+        margin: 8px !important;
+      }
+
+      .tds-u-mt1 {
+        margin-top: 8px !important;
+      }
+
+      .tds-u-mr1 {
+        margin-right: 8px !important;
+      }
+
+      .tds-u-mb1 {
+        margin-bottom: 8px !important;
+      }
+
+      .tds-u-ml1 {
+        margin-left: 8px !important;
+      }
+
+      .tds-u-m2 {
+        margin: 16px !important;
+      }
+
+      .tds-u-mt2 {
+        margin-top: 16px !important;
+      }
+
+      .tds-u-mr2 {
+        margin-right: 16px !important;
+      }
+
+      .tds-u-mb2 {
+        margin-bottom: 16px !important;
+      }
+
+      .tds-u-ml2 {
+        margin-left: 16px !important;
+      }
+
+      .tds-u-m3 {
+        margin: 24px !important;
+      }
+
+      .tds-u-mt3 {
+        margin-top: 24px !important;
+      }
+
+      .tds-u-mr3 {
+        margin-right: 24px !important;
+      }
+
+      .tds-u-mb3 {
+        margin-bottom: 24px !important;
+      }
+
+      .tds-u-ml3 {
+        margin-left: 24px !important;
+      }
+
+      .tds-u-m-auto {
+        margin: auto !important;
+      }
+
+      .tds-u-mt-auto {
+        margin-top: auto !important;
+      }
+
+      .tds-u-mr-auto {
+        margin-right: auto !important;
+      }
+
+      .tds-u-ml-auto {
+        margin-left: auto !important;
+      }
+
+      .tds-u-mb-auto {
+        margin-bottom: auto !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/opacity.stories.mdx b/packages/core/src/stories/utility/utility-classes/opacity.stories.mdx
deleted file mode 100644
index 61b673635..000000000
--- a/packages/core/src/stories/utility/utility-classes/opacity.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-<Meta title="Utilities/Utility Classes/Opacity" />
-
-```css
-.tds-u-opacity-100 {
-  opacity: 1 !important;
-}
-
-.tds-u-opacity-75 {
-  opacity: 0.75 !important;
-}
-
-.tds-u-opacity-50 {
-  opacity: 0.5 !important;
-}
-
-.tds-u-opacity-25 {
-  opacity: 0.25 !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/opacity.stories.ts b/packages/core/src/stories/utility/utility-classes/opacity.stories.ts
new file mode 100644
index 000000000..989710a73
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/opacity.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Opacity',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Opacity = {
+  render: () => {
+    const code = `    
+      .tds-u-opacity-100 {
+        opacity: 1 !important;
+      }
+
+      .tds-u-opacity-75 {
+        opacity: 0.75 !important;
+      }
+
+      .tds-u-opacity-50 {
+        opacity: 0.5 !important;
+      }
+
+      .tds-u-opacity-25 {
+        opacity: 0.25 !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/overflow.stories.mdx b/packages/core/src/stories/utility/utility-classes/overflow.stories.mdx
deleted file mode 100644
index 55cb3b6b6..000000000
--- a/packages/core/src/stories/utility/utility-classes/overflow.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-<Meta title="Utilities/Utility Classes/Overflow" />
-
-```css
-.tds-u-overflow-auto {
-  overflow: auto !important;
-}
-
-.tds-u-overflow-scroll {
-  overflow: scroll !important;
-}
-
-.tds-u-overflow-hidden {
-  overflow: hidden !important;
-}
-
-.tds-u-overflow-visible {
-  overflow: visible !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/overflow.stories.ts b/packages/core/src/stories/utility/utility-classes/overflow.stories.ts
new file mode 100644
index 000000000..95df68432
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/overflow.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Overflow',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Overflow = {
+  render: () => {
+    const code = `      
+      .tds-u-overflow-auto {
+        overflow: auto !important;
+      }
+
+      .tds-u-overflow-scroll {
+        overflow: scroll !important;
+      }
+
+      .tds-u-overflow-hidden {
+        overflow: hidden !important;
+      }
+
+      .tds-u-overflow-visible {
+        overflow: visible !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/padding.stories.mdx b/packages/core/src/stories/utility/utility-classes/padding.stories.mdx
deleted file mode 100644
index bc9acf466..000000000
--- a/packages/core/src/stories/utility/utility-classes/padding.stories.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
-<Meta title="Utilities/Utility Classes/Padding" />
-
-```css
-.tds-u-p0 {
-  padding: 0 !important;
-}
-
-.tds-u-pt0 {
-  padding-top: 0 !important;
-}
-
-.tds-u-pr0 {
-  padding-right: 0 !important;
-}
-
-.tds-u-pb0 {
-  padding-bottom: 0 !important;
-}
-
-.tds-u-pl0 {
-  padding-left: 0 !important;
-}
-
-.tds-u-p1 {
-  padding: 8px !important;
-}
-
-.tds-u-pt1 {
-  padding-top: 8px !important;
-}
-
-.tds-u-pr1 {
-  padding-right: 8px !important;
-}
-
-.tds-u-pb1 {
-  padding-bottom: 8px !important;
-}
-
-.tds-u-pl1 {
-  padding-left: 8px !important;
-}
-
-.tds-u-p2 {
-  padding: 16px !important;
-}
-
-.tds-u-pt2 {
-  padding-top: 16px !important;
-}
-
-.tds-u-pr2 {
-  padding-right: 16px !important;
-}
-
-.tds-u-pb2 {
-  padding-bottom: 16px !important;
-}
-
-.tds-u-pl2 {
-  padding-left: 16px !important;
-}
-
-.tds-u-p3 {
-  padding: 24px !important;
-}
-
-.tds-u-pt3 {
-  padding-top: 24px !important;
-}
-
-.tds-u-pr3 {
-  padding-right: 24px !important;
-}
-
-.tds-u-pb3 {
-  padding-bottom: 24px !important;
-}
-
-.tds-u-pl3 {
-  padding-left: 24px !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/padding.stories.ts b/packages/core/src/stories/utility/utility-classes/padding.stories.ts
new file mode 100644
index 000000000..d7b6eff85
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/padding.stories.ts
@@ -0,0 +1,105 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Padding',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Padding = {
+  render: () => {
+    const code = `
+      .tds-u-p0 {
+        padding: 0 !important;
+      }
+
+      .tds-u-pt0 {
+        padding-top: 0 !important;
+      }
+
+      .tds-u-pr0 {
+        padding-right: 0 !important;
+      }
+
+      .tds-u-pb0 {
+        padding-bottom: 0 !important;
+      }
+
+      .tds-u-pl0 {
+        padding-left: 0 !important;
+      }
+
+      .tds-u-p1 {
+        padding: 8px !important;
+      }
+
+      .tds-u-pt1 {
+        padding-top: 8px !important;
+      }
+
+      .tds-u-pr1 {
+        padding-right: 8px !important;
+      }
+
+      .tds-u-pb1 {
+        padding-bottom: 8px !important;
+      }
+
+      .tds-u-pl1 {
+        padding-left: 8px !important;
+      }
+
+      .tds-u-p2 {
+        padding: 16px !important;
+      }
+
+      .tds-u-pt2 {
+        padding-top: 16px !important;
+      }
+
+      .tds-u-pr2 {
+        padding-right: 16px !important;
+      }
+
+      .tds-u-pb2 {
+        padding-bottom: 16px !important;
+      }
+
+      .tds-u-pl2 {
+        padding-left: 16px !important;
+      }
+
+      .tds-u-p3 {
+        padding: 24px !important;
+      }
+
+      .tds-u-pt3 {
+        padding-top: 24px !important;
+      }
+
+      .tds-u-pr3 {
+        padding-right: 24px !important;
+      }
+
+      .tds-u-pb3 {
+        padding-bottom: 24px !important;
+      }
+
+      .tds-u-pl3 {
+        padding-left: 24px !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/placement.stories.mdx b/packages/core/src/stories/utility/utility-classes/placement.stories.mdx
deleted file mode 100644
index 5ba9a3ebd..000000000
--- a/packages/core/src/stories/utility/utility-classes/placement.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-<Meta title="Utilities/Utility Classes/Placement" />
-
-```css
-.tds-u-top0 {
-  top: 0 !important;
-}
-
-.tds-u-right0 {
-  right: 0 !important;
-}
-
-.tds-u-bottom0 {
-  bottom: 0 !important;
-}
-
-.tds-u-left0 {
-  left: 0 !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/placement.stories.ts b/packages/core/src/stories/utility/utility-classes/placement.stories.ts
new file mode 100644
index 000000000..7a4125d5f
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/placement.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Placement',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Placement = {
+  render: () => {
+    const code = `
+      .tds-u-top0 {
+        top: 0 !important;
+      }
+
+      .tds-u-right0 {
+        right: 0 !important;
+      }
+
+      .tds-u-bottom0 {
+        bottom: 0 !important;
+      }
+
+      .tds-u-left0 {
+        left: 0 !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/position.stories.mdx b/packages/core/src/stories/utility/utility-classes/position.stories.mdx
deleted file mode 100644
index 057592f38..000000000
--- a/packages/core/src/stories/utility/utility-classes/position.stories.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-<Meta title="Utilities/Utility Classes/Position" />
-
-```css
-.tds-u-sticky {
-  position: sticky !important;
-}
-
-.tds-u-static {
-  position: static !important;
-}
-
-.tds-u-relative {
-  position: relative !important;
-}
-
-.tds-u-absolute {
-  position: absolute !important;
-}
-
-.tds-u-fixed {
-  position: fixed !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/position.stories.ts b/packages/core/src/stories/utility/utility-classes/position.stories.ts
new file mode 100644
index 000000000..60f78b479
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/position.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Position',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Position = {
+  render: () => {
+    const code = `
+      .tds-u-sticky {
+        position: sticky !important;
+      }
+
+      .tds-u-static {
+        position: static !important;
+      }
+
+      .tds-u-relative {
+        position: relative !important;
+      }
+
+      .tds-u-absolute {
+        position: absolute !important;
+      }
+
+      .tds-u-fixed {
+        position: fixed !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/text-alignment.stories.mdx b/packages/core/src/stories/utility/utility-classes/text-alignment.stories.mdx
deleted file mode 100644
index 31c054ca5..000000000
--- a/packages/core/src/stories/utility/utility-classes/text-alignment.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-<Meta title="Utilities/Utility Classes/Text alignment" />
-
-```css
-.tds-u-textalign-start {
-  text-align: start !important;
-}
-
-.tds-u-textalign-center {
-  text-align: center !important;
-}
-
-.tds-u-textalign-end {
-  text-align: end !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/text-alignment.stories.ts b/packages/core/src/stories/utility/utility-classes/text-alignment.stories.ts
new file mode 100644
index 000000000..ca268d7b9
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/text-alignment.stories.ts
@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Text Alignment',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const TextAlignment = {
+  render: () => {
+    const code = `
+      .tds-u-textalign-start {
+        text-align: start !important;
+      }
+
+      .tds-u-textalign-center {
+        text-align: center !important;
+      }
+
+      .tds-u-textalign-end {
+        text-align: end !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/visibility.stories.mdx b/packages/core/src/stories/utility/utility-classes/visibility.stories.mdx
deleted file mode 100644
index 9bbecfa74..000000000
--- a/packages/core/src/stories/utility/utility-classes/visibility.stories.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-<Meta title="Utilities/Utility Classes/Visibility" />
-
-```css
-.tds-u-visibility-hidden {
-  visibility: hidden !important;
-}
-
-.tds-u-visibility-visible {
-  visibility: visible !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/visibility.stories.ts b/packages/core/src/stories/utility/utility-classes/visibility.stories.ts
new file mode 100644
index 000000000..8e917b6a1
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/visibility.stories.ts
@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Visibility',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Visibility = {
+  render: () => {
+    const code = `
+      .tds-u-visibility-hidden {
+        visibility: hidden !important;
+      }
+
+      .tds-u-visibility-visible {
+        visibility: visible !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/width.stories.mdx b/packages/core/src/stories/utility/utility-classes/width.stories.mdx
deleted file mode 100644
index 07883ea81..000000000
--- a/packages/core/src/stories/utility/utility-classes/width.stories.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-<Meta title="Utilities/Utility Classes/Width" />
-
-```css
-.tds-u-w-auto {
-  width: auto !important;
-}
-
-.tds-u-w-100 {
-  width: 100% !important;
-}
-
-.tds-u-w-75 {
-  width: 75% !important;
-}
-
-.tds-u-w-50 {
-  width: 50% !important;
-}
-
-.tds-u-w-25 {
-  width: 25% !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/width.stories.ts b/packages/core/src/stories/utility/utility-classes/width.stories.ts
new file mode 100644
index 000000000..2edb52336
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/width.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Width',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Width = {
+  render: () => {
+    const code = `      
+      .tds-u-w-auto {
+        width: auto !important;
+      }
+
+      .tds-u-w-100 {
+        width: 100% !important;
+      }
+
+      .tds-u-w-75 {
+        width: 75% !important;
+      }
+
+      .tds-u-w-50 {
+        width: 50% !important;
+      }
+
+      .tds-u-w-25 {
+        width: 25% !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};
diff --git a/packages/core/src/stories/utility/utility-classes/z-index.stories.mdx b/packages/core/src/stories/utility/utility-classes/z-index.stories.mdx
deleted file mode 100644
index 20873e3df..000000000
--- a/packages/core/src/stories/utility/utility-classes/z-index.stories.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-<Meta title="Utilities/Utility Classes/Z-index" />
-
-```css
-.tds-u-z10 {
-  z-index: 10 !important;
-}
-
-.tds-u-z100 {
-  z-index: 100 !important;
-}
-
-.tds-u-z500 {
-  z-index: 500 !important;
-}
-
-.tds-u-z1000 {
-  z-index: 1000 !important;
-}
-```
diff --git a/packages/core/src/stories/utility/utility-classes/z-index.stories.ts b/packages/core/src/stories/utility/utility-classes/z-index.stories.ts
new file mode 100644
index 000000000..5cfc99e54
--- /dev/null
+++ b/packages/core/src/stories/utility/utility-classes/z-index.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Z Index',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const ZIndex = {
+  render: () => {
+    const code = `     
+      .tds-u-z10 {
+        z-index: 10 !important;
+      }
+
+      .tds-u-z100 {
+        z-index: 100 !important;
+      }
+
+      .tds-u-z500 {
+        z-index: 500 !important;
+      }
+
+      .tds-u-z1000 {
+        z-index: 1000 !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};