diff --git a/packages/react/src/components/Helpers/HelperClasses.stories.js b/packages/react/src/components/Helpers/HelperClasses.stories.js
deleted file mode 100644
index 8e452ebd5b84..000000000000
--- a/packages/react/src/components/Helpers/HelperClasses.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import './HelperClasses-story.scss';
-import React from 'react';
-
-export default {
-  title: 'Helpers/BreakpointClasses',
-  component: BreakpointClasses,
-};
-
-export const BreakpointClasses = () => {
-  return (
-    <>
-      <div className="hide-at-sm">Only hidden on sm breakpoint</div>
-      <div className="hide-at-md">Only hidden on md breakpoint</div>
-      <div className="hide-at-lg">Only hidden on lg breakpoint</div>
-      <div className="hide-at-xlg">Only hidden on xlg breakpoint</div>
-      <div className="hide-at-max">Only hidden on max breakpoint</div>
-    </>
-  );
-};
diff --git a/packages/react/src/components/Helpers/HelperClasses-story.scss b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss
similarity index 75%
rename from packages/react/src/components/Helpers/HelperClasses-story.scss
rename to packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss
index a61808030fe7..a5d7f83777e8 100644
--- a/packages/react/src/components/Helpers/HelperClasses-story.scss
+++ b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint-story.scss
@@ -1,4 +1,4 @@
-@use '../../../../styles/scss/utilities/helper-classes' as *;
+@use '../../../../styles/scss/utilities/hide-at-breakpoint' as *;
 
 .hide-at-sm {
   @include hide-at-sm;
diff --git a/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js
new file mode 100644
index 000000000000..d4d16683f595
--- /dev/null
+++ b/packages/react/src/components/HideAtBreakpoint/HideAtBreakpoint.stories.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './HideAtBreakpoint-story.scss';
+import React from 'react';
+
+export default {
+  title: 'Helpers/HideAtBreakpoint',
+  component: HideAtBreakpoint,
+};
+
+export const HideAtBreakpoint = () => {
+  return (
+    <>
+      <div className="hide-at-sm">
+        <code>@include hide-at-sm</code> <br />
+        <br />
+        Only hidden on sm breakpoint
+      </div>
+      <div className="hide-at-md">
+        <code>@include hide-at-md</code> <br />
+        <br />
+        Only hidden on md breakpoint
+      </div>
+      <div className="hide-at-lg">
+        <code>@include hide-at-lg</code> <br />
+        <br />
+        Only hidden on lg breakpoint
+      </div>
+      <div className="hide-at-xlg">
+        <code>@include hide-at-xlg</code> <br />
+        <br />
+        Only hidden on xlg breakpoint
+      </div>
+      <div className="hide-at-max">
+        <code>@include hide-at-max</code> <br />
+        <br />
+        Only hidden on max breakpoint
+      </div>
+    </>
+  );
+};
diff --git a/packages/styles/scss/utilities/_helper-classes.scss b/packages/styles/scss/utilities/_hide-at-breakpoint.scss
similarity index 99%
rename from packages/styles/scss/utilities/_helper-classes.scss
rename to packages/styles/scss/utilities/_hide-at-breakpoint.scss
index 60177b2d840e..59850cd1ab07 100644
--- a/packages/styles/scss/utilities/_helper-classes.scss
+++ b/packages/styles/scss/utilities/_hide-at-breakpoint.scss
@@ -3,7 +3,6 @@
 
 // Mixins that can be used to hide elements only at specific breakpoints.
 // Helpful for when you would like to hide elements outside of a Grid context
-
 @mixin hide-at-sm {
   padding: 2rem 1rem;
   background: #8a3ffc;
diff --git a/packages/styles/scss/utilities/_index.scss b/packages/styles/scss/utilities/_index.scss
index a8e369b99add..67b33137817d 100644
--- a/packages/styles/scss/utilities/_index.scss
+++ b/packages/styles/scss/utilities/_index.scss
@@ -10,7 +10,7 @@
 @forward 'component-reset' as component-*;
 @forward 'convert' show em, rem;
 @forward 'focus-outline';
-@forward 'helper-classes';
+@forward 'hide-at-breakpoint';
 @forward 'high-contrast-mode';
 @forward 'keyframes';
 @forward 'placeholder-colors';