diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 8b487f6b..95a595e1 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -111,6 +111,12 @@ const preview: Preview = {
           description:
             'This component lacks some TEDI-Ready functionality, e.g it may rely on another component that has not yet been developed',
         },
+        mobileViewDifference: {
+          background: '#99BDDA',
+          color: '#000',
+          description:
+            'This component has a different layout on mobile. Use the mobile breakpoint or resize the browser window to review the mobile design.',
+        },
       },
     },
   },
diff --git a/package-lock.json b/package-lock.json
index 5d497809..fcb4226a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "@tedi-design-system/angular",
       "version": "0.0.0-semantic-version",
       "dependencies": {
-        "@tedi-design-system/core": "^3.0.0"
+        "@tedi-design-system/core": "^3.0.1"
       },
       "devDependencies": {
         "@angular-devkit/core": "19.2.15",
@@ -9631,9 +9631,9 @@
       }
     },
     "node_modules/@tedi-design-system/core": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-3.0.0.tgz",
-      "integrity": "sha512-YRu9Aa1+WKg+a2iCJd+miDjwa/8bLwajKSa00666W6c9KFZkgRF2B7j/UkyX5BvGhp+iHzTyA5yUfcK3MqTFMA==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@tedi-design-system/core/-/core-3.0.1.tgz",
+      "integrity": "sha512-ioet8RlFmWjg8fic4WUuYeavLiqUsKx3vFGZzzXkL91xNNjHexNVKhhtMLLkpCywzOc2tKXMx3AYdDhu2dsbwg==",
       "engines": {
         "node": ">=18.0.0",
         "npm": ">=8.0.0"
diff --git a/package.json b/package.json
index 820fe268..bdd0e160 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "ngx-float-ui": "^19.0.1 || ^20.0.0"
   },
   "dependencies": {
-    "@tedi-design-system/core": "^3.0.0"
+    "@tedi-design-system/core": "^3.0.1"
   },
   "devDependencies": {
     "@angular-devkit/core": "19.2.15",
diff --git a/src/docs/badges.mdx b/src/docs/badges.mdx
index 4a8bbdb2..dfcf32ca 100644
--- a/src/docs/badges.mdx
+++ b/src/docs/badges.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from "@storybook/blocks";
 
 <Meta name="Welcome" title="Documentation/Badge guide" />
 
@@ -6,60 +6,141 @@ import { Meta } from '@storybook/blocks';
 
 In our Storybook, we use status badges to indicate key attributes of components at a glance. These badges provide information about a component's development status, feature support, and other relevant characteristics.
 
-<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', alignItems: 'center', gap: '1rem' }}>
-    <div style={{
-        width: 'fit-content',
-        backgroundColor: '#ff8000',
-        padding: '4px 8px',
-        borderRadius: '4px',
-    }}>
-        <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Dev Component</span>
-    </div>
-    <p style={{ gridColumn: 'span 4' }}>This badge indicates that the component is intended for developers only and is not available in Figma.</p>
-    <div style={{
-        height: 'fit-content',
-        width: 'fit-content',
-        backgroundColor: '#308653',
-        padding: '4px 8px',
-        borderRadius: '4px',
-    }}>
-        <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Breakpoint support</span>
-    </div>
-    <p style={{ gridColumn: 'span 4' }}>This badge signifies that the component supports breakpoints, allowing props to be overridden at different.</p>
-    <div style={{
-        width: 'fit-content',
-        backgroundColor: '#fff',
-        padding: '4px 8px',
-        borderRadius: '4px',
-    }}>
-        <span style={{ color: '#000', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Internal Component</span>
-    </div>
-    <p style={{ gridColumn: 'span 4' }}>This badge indicates that the component is used internally within TEDI and is not exported for public use.</p>
-    <div style={{
-        width: 'fit-content',
-        backgroundColor: '#f02c2c',
-        padding: '4px 8px',
-        borderRadius: '4px',
-    }}>
-        <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Deprecated</span>
-    </div>
-    <p style={{ gridColumn: 'span 4' }}>This badge indicates that the component is being phased out and will be removed in a future release.</p>
-    <div style={{
-        width: 'fit-content',
-        backgroundColor: '#005aa3',
-        padding: '4px 8px',
-        borderRadius: '4px',
-    }}>
-        <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Exists in TEDI Ready</span>
-    </div>
-    <p style={{ gridColumn: 'span 4' }}>This badge means that an equivalent version of the component is available in the TEDI-Ready component set.</p>
-    <div style={{
-        width: 'fit-content',
-        backgroundColor: '#9bbb5f',
-        padding: '4px 8px',
-        borderRadius: '4px',
-    }}>
-        <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold', textTransform: 'uppercase' }}>Partially TEDI-Ready</span>
-    </div>
-    <p style={{ gridColumn: 'span 4' }}>This badge indicates that the component lacks some TEDI-Ready functionality. For example, it may rely on another component that has not yet been developed.</p>
+<div
+  style={{
+    display: "grid",
+    gridTemplateColumns: "repeat(5, 1fr)",
+    alignItems: "center",
+    gap: "1rem",
+  }}
+>
+  <div
+    style={{
+      width: "fit-content",
+      backgroundColor: "#ff8000",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      color: "#fff",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+    }}
+  >
+    {"Dev Component"}
+  </div>
+  <p style={{ gridColumn: "span 4" }}>
+    This badge indicates that the component is intended for developers only and
+    is not available in Figma.
+  </p>
+  <div
+    style={{
+      height: "fit-content",
+      width: "fit-content",
+      backgroundColor: "#308653",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      color: "#fff",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+    }}
+  >
+    {"Breakpoint support"}
+  </div>
+  <p style={{ gridColumn: "span 4" }}>
+    This badge signifies that the component supports breakpoints, allowing props
+    to be overridden at different.
+  </p>
+  <div
+    style={{
+      width: "fit-content",
+      backgroundColor: "#fff",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      color: "#000",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+    }}
+  >
+    {"Internal Component"}
+  </div>
+  <p style={{ gridColumn: "span 4" }}>
+    This badge indicates that the component is used internally within TEDI and
+    is not exported for public use.
+  </p>
+  <div
+    style={{
+      width: "fit-content",
+      backgroundColor: "#f02c2c",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      color: "#fff",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+    }}
+  >
+    {"Deprecated"}
+  </div>
+  <p style={{ gridColumn: "span 4" }}>
+    This badge indicates that the component is being phased out and will be
+    removed in a future release.
+  </p>
+  <div
+    style={{
+      width: "fit-content",
+      backgroundColor: "#005aa3",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      color: "#fff",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+    }}
+  >
+    {"Exists in TEDI Ready"}
+  </div>
+  <p style={{ gridColumn: "span 4" }}>
+    This badge means that an equivalent version of the component is available in
+    the TEDI-Ready component set.
+  </p>
+  <div
+    style={{
+      width: "fit-content",
+      backgroundColor: "#9bbb5f",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      color: "#fff",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+    }}
+  >
+    {"Partially TEDI-Ready"}
+  </div>
+  <p style={{ gridColumn: "span 4" }}>
+    This badge indicates that the component lacks some TEDI-Ready functionality.
+    For example, it may rely on another component that has not yet been
+    developed.
+  </p>
+  <div
+    style={{
+      width: "fit-content",
+      backgroundColor: "#99BDDA",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      color: "#000",
+      fontSize: "14px",
+      fontWeight: "bold",
+      textTransform: "uppercase",
+      textAlign: "center",
+    }}
+  >
+    {"Mobile view difference"}
+  </div>
+  <p style={{ gridColumn: "span 4" }}>
+    This component has a different layout on mobile. Use the mobile breakpoint
+    or resize the browser window to review the mobile design.
+  </p>
 </div>
diff --git a/tedi/components/base/text/text.stories.ts b/tedi/components/base/text/text.stories.ts
index a724148e..3112f2f9 100644
--- a/tedi/components/base/text/text.stories.ts
+++ b/tedi/components/base/text/text.stories.ts
@@ -27,6 +27,11 @@ export default {
       ],
     }),
   ],
+  parameters: {
+    status: {
+      type: ["mobileViewDifference"],
+    },
+  },
   argTypes: {
     ngContent: {
       name: "ng-content",
@@ -124,58 +129,25 @@ export const Default: StoryObj<TextComponent & { ngContent: string }> = {
 export const Headings: StoryObj<TextComponent> = {
   render: (args) => ({
     props: args,
-    styles: [
-      `
-        h1.mobile {
-          font-size: var(--heading-h1-size-mobile);
-        }
-        h2.mobile {
-          font-size: var(--heading-h2-size-mobile);
-        }
-        h3.mobile {
-          font-size: var(--heading-h3-size-mobile);
-        }
-        h4.mobile {
-          font-size: var(--heading-h4-size-mobile);
-        }
-        h5.mobile {
-          font-size: var(--heading-h5-size-mobile);
-        }
-        h6.mobile {
-          font-size: var(--heading-h6-size-mobile);
-        }
-      }
-    `,
-    ],
     template: `
       <div class="example-list">
-        <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom border-bottom--3x'">
-          <b>Desktop</b>
-          <b>Mobile</b>
-        </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <h1 tedi-text>Heading H1</h1>
-          <h1 tedi-text class="mobile">Heading H1</h1>
         </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <h2 tedi-text>Heading H2</h2>
-          <h2 tedi-text class="mobile">Heading H2</h2>
         </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <h3 tedi-text>Heading H3</h3>
-          <h3 tedi-text class="mobile">Heading H3</h3>
         </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <h4 tedi-text>Heading H4</h4>
-          <h4 tedi-text class="mobile">Heading H4</h4>
         </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <h5 tedi-text>Heading H5</h5>
-          <h5 tedi-text class="mobile">Heading H5</h5>
         </tedi-row>
-        <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
+        <tedi-row [cols]="2" [class]="'padding-14-16'">
           <h6 tedi-text>Heading H6</h6>
-          <h6 tedi-text class="mobile">Heading H6</h6>
         </tedi-row>
       </div>
     `,
@@ -187,25 +159,17 @@ export const Subtitles: StoryObj<TextComponent> = {
     props: args,
     template: `
       <div class="example-list">
-        <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom border-bottom--3x'">
-          <b>Desktop</b>
-          <b>Mobile</b>
-        </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <p tedi-text modifiers="subtitle">Subtitle</p>
-          <p tedi-text modifiers="subtitle" class="mobile">Subtitle</p>
         </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <p tedi-text [modifiers]="['small', 'subtitle']">Subtitle small</p>
-          <p tedi-text [modifiers]="['small', 'subtitle']" class="mobile">Subtitle small</p>
         </tedi-row>
         <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
           <label tedi-text>Label</label>
-          <label tedi-text class="mobile">Label</label>
         </tedi-row>
-        <tedi-row [cols]="2" [class]="'padding-14-16 border-bottom'">
+        <tedi-row [cols]="2" [class]="'padding-14-16'">
           <label tedi-text modifiers="bold">Label bold</label>
-          <label tedi-text modifiers="bold" class="mobile">Label bold</label>
         </tedi-row>
       </div>
     `,