diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java
index f5d7c20..dc24fd9 100644
--- a/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java
@@ -194,7 +194,10 @@ public class NotificationPage extends OutlinePage {
             you can easily implement it by using the [i]StackPane[/i] layout."""
         );
 
-        return new ExampleBox(box, new Snippet(getClass(), 4), description);
+        var example = new ExampleBox(box, new Snippet(getClass(), 4), description);
+        example.setAllowDisable(false);
+
+        return example;
     }
 
     private Node elevationExample() {
diff --git a/styles/src/components/_card.scss b/styles/src/components/_card.scss
index dd1b942..c81337d 100644
--- a/styles/src/components/_card.scss
+++ b/styles/src/components/_card.scss
@@ -52,11 +52,23 @@ $title-font-size: cfg.$font-title-4;
     &.interactive:hover {
       @include effects.shadow(cfg.$elevation-color, cfg.$elevation-interactive);
     }
+
+    TextFlow {
+      Text {
+        &:disabled {
+          -fx-opacity: cfg.$opacity-disabled;
+        }
+      }
+    }
   }
 
   &:has-image {
     >.container >.sub-header {
       -fx-padding: 0;
+
+      &:disabled {
+        -fx-opacity: cfg.$opacity-disabled;
+      }
     }
   }
 
diff --git a/styles/src/components/_message.scss b/styles/src/components/_message.scss
index 9558472..1e9ec12 100644
--- a/styles/src/components/_message.scss
+++ b/styles/src/components/_message.scss
@@ -95,6 +95,12 @@ $close-button-padding:  0.5em; // private variable
       -fx-border-width: cfg.$border-width;
       -fx-border-radius: cfg.$border-radius;
 
+      >.graphic {
+        &:disabled {
+          -fx-opacity: cfg.$opacity-disabled;
+        }
+      }
+
       >.header {
         >.title {
           -fx-text-fill: -color-message-fg-secondary;
@@ -103,6 +109,10 @@ $close-button-padding:  0.5em; // private variable
         >.description {
           Text {
             -fx-fill: -color-message-fg-secondary;
+
+            &:disabled {
+              -fx-opacity: cfg.$opacity-disabled;
+            }
           }
         }
       }
@@ -153,6 +163,10 @@ $close-button-padding:  0.5em; // private variable
       -fx-background-color: -color-message-border, -color-message-button-hover;
       -fx-background-insets: 0, 1;
     }
+
+    &:disabled {
+      -fx-opacity: cfg.$opacity-disabled;
+    }
   }
 
   &:closeable {
diff --git a/styles/src/components/_tile.scss b/styles/src/components/_tile.scss
index de7eab0..cfc3ab7 100644
--- a/styles/src/components/_tile.scss
+++ b/styles/src/components/_tile.scss
@@ -13,7 +13,11 @@ $title-font-size: 1.05em !default; // semibold would be much better, but it's Ja
     -fx-background-radius: cfg.$border-radius;
     -fx-spacing: 1em;
 
-    // >.graphic {}
+    >.graphic {
+      &:disabled {
+        -fx-opacity: cfg.$opacity-disabled;
+      }
+    }
 
     >.header {
       -fx-alignment: CENTER_LEFT;
@@ -22,6 +26,14 @@ $title-font-size: 1.05em !default; // semibold would be much better, but it's Ja
       >.title {
         -fx-font-size: $title-font-size;
       }
+
+      >.description {
+        Text {
+          &:disabled {
+            -fx-opacity: cfg.$opacity-disabled;
+          }
+        }
+      }
     }
 
     // >.action  {}