diff --git a/core/.stylelintrc.yml b/core/.stylelintrc.yml
index 556ee7d5fb..6cd3fda7b9 100644
--- a/core/.stylelintrc.yml
+++ b/core/.stylelintrc.yml
@@ -7,6 +7,7 @@ ignoreFiles:
   - src/css/flex-utils.scss
   - src/css/normalize.scss
   - src/css/text-alignment.scss
+  - src/css/display.scss
   - src/components/slides/slides-vendor.scss
   - src/themes/ionic.mixins.scss
   - src/themes/ionic.functions.color.scss
@@ -272,4 +273,4 @@ rules:
     - transform-origin
 
   string-quotes:
-    - double
\ No newline at end of file
+    - double
diff --git a/core/src/css/display.scss b/core/src/css/display.scss
new file mode 100644
index 0000000000..3bd097f706
--- /dev/null
+++ b/core/src/css/display.scss
@@ -0,0 +1,31 @@
+@import "../themes/ionic.globals";
+@import "../themes/ionic.mixins";
+
+// Display
+// --------------------------------------------------
+// Modifies display of a particular element based on the given classes
+
+.ion-hide {
+  display: none !important;
+}
+
+// Adds hidden attributes
+@each $breakpoint in map-keys($screen-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
+
+  @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
+    // Provide `ion-hide-{bp}-up` classes for hiding the element based
+    // on the breakpoint
+    .ion-hide-#{$infix}-up {
+      display: none !important;
+    }
+  }
+
+  @include media-breakpoint-down($breakpoint, $screen-breakpoints) {
+    // Provide `ion-hide-{bp}-down` classes for hiding the element based
+    // on the breakpoint
+    .ion-hide-#{$infix}-down {
+      display: none !important;
+    }
+  }
+}
diff --git a/core/src/css/utils.bundle.scss b/core/src/css/utils.bundle.scss
index 0924f386cb..c26ad459e2 100644
--- a/core/src/css/utils.bundle.scss
+++ b/core/src/css/utils.bundle.scss
@@ -3,3 +3,4 @@
 @import "./text-alignment";
 @import "./text-transformation";
 @import "./flex-utils";
+@import "./display";