diff --git a/packages/calcite-components/src/components/tip/resources.ts b/packages/calcite-components/src/components/tip/resources.ts
index 5ea0631d833..52dabe7faf2 100644
--- a/packages/calcite-components/src/components/tip/resources.ts
+++ b/packages/calcite-components/src/components/tip/resources.ts
@@ -6,6 +6,7 @@ export const CSS = {
   imageFrame: "image-frame",
   content: "content",
   info: "info",
+  infoNoThumbnail: "info--no-thumbnail",
 };
 
 export const ICONS = {
diff --git a/packages/calcite-components/src/components/tip/tip.scss b/packages/calcite-components/src/components/tip/tip.scss
index e8f7d7f344f..dd8786aeebb 100644
--- a/packages/calcite-components/src/components/tip/tip.scss
+++ b/packages/calcite-components/src/components/tip/tip.scss
@@ -49,9 +49,10 @@
 .info {
   @apply py-0 px-4;
   inline-size: 70%;
-  &:only-child {
-    @apply w-full px-0;
-  }
+}
+
+.info--no-thumbnail {
+  @apply w-full px-0;
 }
 
 ::slotted(p) {
diff --git a/packages/calcite-components/src/components/tip/tip.tsx b/packages/calcite-components/src/components/tip/tip.tsx
index 7a9398cf589..ce7b6e5c55d 100644
--- a/packages/calcite-components/src/components/tip/tip.tsx
+++ b/packages/calcite-components/src/components/tip/tip.tsx
@@ -10,12 +10,6 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import {
-  ConditionalSlotComponent,
-  connectConditionalSlotComponent,
-  disconnectConditionalSlotComponent,
-} from "../../utils/conditionalSlot";
-import { getSlotted } from "../../utils/dom";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -26,6 +20,7 @@ import {
 } from "../../utils/t9n";
 import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading";
 import { logger } from "../../utils/logger";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
 import { TipMessages } from "./assets/tip/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -46,7 +41,7 @@ logger.deprecated("component", {
   shadow: true,
   assetsDirs: ["assets"],
 })
-export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {
+export class Tip implements LocalizedComponent, T9nComponent {
   // --------------------------------------------------------------------------
   //
   //  Properties
@@ -108,6 +103,8 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
 
   @State() defaultMessages: TipMessages;
 
+  @State() hasThumbnail = false;
+
   @State() effectiveLocale = "";
 
   @Watch("effectiveLocale")
@@ -122,7 +119,6 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
-    connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -132,7 +128,6 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
   }
 
   disconnectedCallback(): void {
-    disconnectConditionalSlotComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -160,6 +155,10 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
     this.calciteTipDismiss.emit();
   };
 
+  private handleThumbnailSlotChange = (event: Event): void => {
+    this.hasThumbnail = slotChangeHasAssignedElement(event);
+  };
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -195,18 +194,16 @@ export class Tip implements ConditionalSlotComponent, LocalizedComponent, T9nCom
   }
 
   renderImageFrame(): VNode {
-    const { el } = this;
-
-    return getSlotted(el, SLOTS.thumbnail) ? (
-      <div class={CSS.imageFrame} key="thumbnail">
-        <slot name={SLOTS.thumbnail} />
+    return (
+      <div class={CSS.imageFrame} hidden={!this.hasThumbnail} key="thumbnail">
+        <slot name={SLOTS.thumbnail} onSlotchange={this.handleThumbnailSlotChange} />
       </div>
-    ) : null;
+    );
   }
 
   renderInfoNode(): VNode {
     return (
-      <div class={CSS.info}>
+      <div class={{ [CSS.info]: true, [CSS.infoNoThumbnail]: !this.hasThumbnail }}>
         <slot />
       </div>
     );
diff --git a/packages/calcite-components/src/demos/tip-manager.html b/packages/calcite-components/src/demos/tip-manager.html
index dd06942a4d2..3bde9623392 100644
--- a/packages/calcite-components/src/demos/tip-manager.html
+++ b/packages/calcite-components/src/demos/tip-manager.html
@@ -50,7 +50,7 @@
             <img
               slot="thumbnail"
               width="1000"
-              height="600"
+              height="200"
               src="./_assets/images/placeholder.svg"
               alt="This is an image of nature."
             />
@@ -89,7 +89,7 @@
             <img
               slot="thumbnail"
               width="1000"
-              height="600"
+              height="200"
               src="./_assets/images/placeholder.svg"
               alt="This is an image of nature."
             />
@@ -125,7 +125,7 @@
                 <img
                   slot="thumbnail"
                   width="1000"
-                  height="600"
+                  height="200"
                   src="./_assets/images/placeholder.svg"
                   alt="This is an image of nature."
                 />
@@ -145,7 +145,7 @@
                 <img
                   slot="thumbnail"
                   width="1000"
-                  height="600"
+                  height="200"
                   src="./_assets/images/placeholder.svg"
                   alt="This is an image of nature."
                 />
@@ -160,7 +160,7 @@
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
+                height="200"
                 src="./_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
diff --git a/packages/calcite-components/src/demos/tip/basic.html b/packages/calcite-components/src/demos/tip/basic.html
index 8b574caf8ba..b839c283b36 100644
--- a/packages/calcite-components/src/demos/tip/basic.html
+++ b/packages/calcite-components/src/demos/tip/basic.html
@@ -20,8 +20,8 @@ <h2>With thumbnail</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -51,8 +51,8 @@ <h2>Without heading</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>This tip is how a tip should appear without a dismissible button as well as without a heading.</p>
@@ -67,8 +67,8 @@ <h2>Without heading, close-disabled</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>This tip is how a tip should appear without a dismissible button as well as without a heading.</p>
@@ -103,8 +103,8 @@ <h2>Tip Group with thumbnails</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -118,8 +118,8 @@ <h2>Tip Group with thumbnails</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -137,8 +137,8 @@ <h2>Tip Group with thumbnails, close-disabled</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>
@@ -152,8 +152,8 @@ <h2>Tip Group with thumbnails, close-disabled</h2>
               <img
                 slot="thumbnail"
                 width="1000"
-                height="600"
-                src="./_assets/images/placeholder.svg"
+                height="200"
+                src="../_assets/images/placeholder.svg"
                 alt="This is an image of nature."
               />
               <p>