diff --git a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
index e01a9c6e3e..024ce2108b 100644
--- a/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
+++ b/packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap
@@ -2725,6 +2725,12 @@ p.c4p--about-modal__copyright-text:first-child {
   max-height: calc(100% - 3rem);
   transform: translate3d(0, min(95vh, 500px), 0);
 }
+.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__container {
+  border: 1px solid transparent;
+  /* override carbon ai removing background gradient */
+  background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+  box-shadow: 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.32));
+}
 .c4p--tearsheet.c4p--tearsheet.c4p--tearsheet .c4p--tearsheet__container {
   transition: transform 240ms cubic-bezier(0, 0, 0.3, 1), max-height 240ms cubic-bezier(0, 0, 0.3, 1);
 }
@@ -2822,8 +2828,11 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-nav {
   padding: 1.5rem 2rem 0;
 }
-.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
-  padding-right: 4rem;
+.c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon, .c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header {
+  padding-right: 5rem;
+}
+.c4p--tearsheet.c4p--tearsheet--wide.c4p--tearsheet--has-slug .c4p--tearsheet__header.c4p--tearsheet__header--with-close-icon {
+  margin-right: 3rem;
 }
 .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
   max-width: 80%;
@@ -2876,6 +2885,9 @@ p.c4p--about-modal__copyright-text:first-child {
   overflow: auto;
   flex-grow: 1;
 }
+.c4p--tearsheet.c4p--tearsheet--has-slug .c4p--tearsheet__main {
+  background: linear-gradient(to top, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, #78a9ff), var(--cds-ai-border-end, #d0e2ff)) border-box, linear-gradient(to top, var(--cds-background, #ffffff), var(--cds-background, #ffffff)) border-box;
+}
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination,
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--pagination__control-buttons,
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__content .cds--text-input,
@@ -2914,6 +2926,9 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__buttons {
   background: var(--cds-background, #ffffff);
 }
+.c4p--tearsheet.c4p--tearsheet--has-slug:not(.c4p--tearsheet--has-close) .cds--slug {
+  inset-inline-end: 0;
+}
 
 .c4p--create-tearsheet-narrow .cds--modal-header__heading,
 .c4p--create-tearsheet-narrow .cds--modal-header__label,
diff --git a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss
index eae14d7038..60f19faeaf 100644
--- a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss
+++ b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss
@@ -93,6 +93,22 @@ $motion-duration: $duration-moderate-02;
     transform: translate3d(0, calc(min(95vh, 500px)), 0);
   }
 
+  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
+    .#{$block-class}__container {
+    border: 1px solid transparent;
+    /* override carbon ai removing background gradient */
+    background: linear-gradient(to top, var(--cds-layer), var(--cds-layer))
+        padding-box,
+      linear-gradient(
+          to bottom,
+          var(--cds-ai-border-start, #78a9ff),
+          var(--cds-ai-border-end, #d0e2ff)
+        )
+        border-box,
+      linear-gradient(to top, var(--cds-layer), var(--cds-layer)) border-box;
+    box-shadow: 0 4px 10px 2px $ai-drop-shadow;
+  }
+
   // extra specificity to ensure this transition overrides the carbon default
   &.#{$block-class}.#{$block-class} .#{$block-class}__container {
     transition: transform $motion-duration motion(entrance, expressive),
@@ -223,8 +239,14 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--wide
+    .#{$block-class}__header.#{$block-class}__header--with-close-icon,
+  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
+    padding-right: $spacing-11;
+  }
+
+  &.#{$block-class}--wide.#{$block-class}--has-slug
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    padding-right: $spacing-10;
+    margin-right: $spacing-09;
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
@@ -292,6 +314,10 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
+  &.#{$block-class}--has-slug .#{$block-class}__main {
+    @include utilities.callout-gradient('default', 0);
+  }
+
   &.#{$block-class}--wide .#{$block-class}__content {
     // Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
     .#{$carbon-prefix}--pagination,
@@ -320,7 +346,8 @@ $motion-duration: $duration-moderate-02;
     .#{$carbon-prefix}--dropdown--light .#{$carbon-prefix}--dropdown-list,
     /* stylelint-disable-next-line prettier/prettier */
     .#{$carbon-prefix}--number--light input[type='number'],
-    .#{$carbon-prefix}--date-picker--light .#{$carbon-prefix}--date-picker__input {
+    .#{$carbon-prefix}--date-picker--light
+      .#{$carbon-prefix}--date-picker__input {
       background-color: $field-02;
     }
   }
@@ -340,4 +367,9 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide .#{$block-class}__buttons {
     background: $background;
   }
+
+  &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
+    .#{$carbon-prefix}--slug {
+    inset-inline-end: 0;
+  }
 }
diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.js b/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.js
index 4229b8abb0..840abf4ae7 100644
--- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.js
+++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.stories.js
@@ -21,6 +21,8 @@ import {
   Tabs,
   TabList,
   TextInput,
+  unstable__Slug as Slug,
+  unstable__SlugContent as SlugContent,
 } from '@carbon/react';
 
 import { Tearsheet, deprecatedProps } from './Tearsheet';
@@ -102,6 +104,17 @@ export default {
     navigation: { control: { disable: true } },
     open: { control: { disable: true } },
     portalTarget: { control: { disable: true } },
+    slug: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'No AI slug',
+          1: 'with AI Slug',
+        },
+        default: 0,
+      },
+      options: [0, 1],
+    },
   },
 };
 
@@ -160,9 +173,29 @@ const tabs = (
 
 const title = 'Title of the tearsheet';
 
+const sampleSlug = (
+  <Slug className="slug-container" size="xs">
+    <SlugContent>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          This is not really Lorem Ipsum but the spell checker did not like the
+          previous text with it&apos;s non-words which is why this unwieldy
+          sentence, should one choose to call it that, here.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+    </SlugContent>
+  </Slug>
+);
+
 // Template.
 // eslint-disable-next-line react/prop-types
-const Template = ({ actions, ...args }) => {
+const Template = ({ actions, slug, ...args }) => {
   const [open, setOpen] = useState(false);
 
   const wiredActions =
@@ -193,6 +226,7 @@ const Template = ({ actions, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
+          slug={slug && sampleSlug}
         >
           {mainContent}
         </Tearsheet>
@@ -202,7 +236,7 @@ const Template = ({ actions, ...args }) => {
 };
 
 // eslint-disable-next-line react/prop-types
-const StackedTemplate = ({ actions, ...args }) => {
+const StackedTemplate = ({ actions, slug, ...args }) => {
   const [open1, setOpen1] = useState(false);
   const [open2, setOpen2] = useState(false);
   const [open3, setOpen3] = useState(false);
@@ -294,6 +328,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           open={open1}
           onClose={() => setOpen1(false)}
           selectorPrimaryFocus="#stacked-input-1"
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 1
@@ -323,6 +358,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           open={open2}
           onClose={() => setOpen2(false)}
           selectorPrimaryFocus="#stacked-input-2"
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 2
@@ -339,6 +375,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           open={open3}
           onClose={() => setOpen3(false)}
           selectorPrimaryFocus="#stacked-input-3"
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__dummy-content-block">
             Main content 3
@@ -408,6 +445,7 @@ export const fullyLoaded = prepareStory(Template, {
     onClose: action('onClose called'),
     title,
     actions: 0,
+    slug: 1,
   },
 });
 
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.stories.js b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.stories.js
index 576a0c2116..e8a8c4e485 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.stories.js
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.stories.js
@@ -11,7 +11,14 @@ import { action } from '@storybook/addon-actions';
 
 import { pkg } from '../../settings';
 
-import { Button, Form, FormGroup, TextInput } from '@carbon/react';
+import {
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+  unstable__Slug as Slug,
+  unstable__SlugContent as SlugContent,
+} from '@carbon/react';
 
 import { TearsheetNarrow, deprecatedProps } from './TearsheetNarrow';
 
@@ -57,6 +64,17 @@ export default {
     onClose: { control: { disable: true } },
     open: { control: { disable: true } },
     portalTarget: { control: { disable: true } },
+    slug: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'No AI slug',
+          1: 'with AI Slug',
+        },
+        default: 0,
+      },
+      options: [0, 1],
+    },
   },
 };
 
@@ -83,9 +101,29 @@ const mainContent = (
 
 const title = 'Title of the tearsheet';
 
+const sampleSlug = (
+  <Slug className="slug-container" size="xs">
+    <SlugContent>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          This is not really Lorem Ipsum but the spell checker did not like the
+          previous text with it&apos;s non-words which is why this unwieldy
+          sentence, should one choose to call it that, here.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+    </SlugContent>
+  </Slug>
+);
+
 // Template.
 // eslint-disable-next-line react/prop-types
-const Template = ({ actions, ...args }) => {
+const Template = ({ actions, slug, ...args }) => {
   const [open, setOpen] = useState(false);
   const ref = useRef();
 
@@ -113,6 +151,7 @@ const Template = ({ actions, ...args }) => {
           actions={wiredActions}
           open={open}
           onClose={() => setOpen(false)}
+          slug={slug && sampleSlug}
         >
           {mainContent}
         </TearsheetNarrow>
@@ -122,7 +161,7 @@ const Template = ({ actions, ...args }) => {
 };
 
 // eslint-disable-next-line react/prop-types
-const StackedTemplate = ({ actions, ...args }) => {
+const StackedTemplate = ({ actions, slug, ...args }) => {
   const [open1, setOpen1] = useState(false);
   const [open2, setOpen2] = useState(false);
   const [open3, setOpen3] = useState(false);
@@ -194,6 +233,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           title="Tearsheet #1"
           open={open1}
           onClose={() => setOpen1(false)}
+          slug={slug && sampleSlug}
         >
           <div className="tearsheet-stories__narrow-content-block">
             Main content 1
@@ -205,6 +245,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           title="Tearsheet #2"
           open={open2}
           onClose={() => setOpen2(false)}
+          slug={slug && sampleSlug}
           selectorPrimaryFocus="#main-content"
         >
           <div className="tearsheet-stories__narrow-content-block">
@@ -217,6 +258,7 @@ const StackedTemplate = ({ actions, ...args }) => {
           title="Tearsheet #3"
           open={open3}
           onClose={() => setOpen3(false)}
+          slug={slug && sampleSlug}
           selectorPrimaryFocus="#main-content"
         >
           <div className="tearsheet-stories__narrow-content-block">
@@ -250,6 +292,7 @@ export const fullyLoaded = prepareStory(Template, {
     onClose: action('onClose called'),
     title,
     actions: 0,
+    slug: 1,
   },
 });
 
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js
index 835bb5ee1d..bfe3c44037 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.js
@@ -86,9 +86,10 @@ export const TearsheetShell = React.forwardRef(
       navigation,
       onClose,
       open,
+      portalTarget: portalTargetIn,
       selectorPrimaryFocus,
       size,
-      portalTarget: portalTargetIn,
+      slug,
       title,
       verticalPosition,
       // Collect any other property values passed in.
@@ -231,7 +232,10 @@ export const TearsheetShell = React.forwardRef(
               depth > 1 || (depth === 1 && prevDepth.current > 1),
             [`${bc}--wide`]: wide,
             [`${bc}--narrow`]: !wide,
+            [`${bc}--has-slug`]: slug,
+            [`${bc}--has-close`]: effectiveHasCloseIcon,
           })}
+          slug={slug}
           style={{
             [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width,
             [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width,
@@ -506,6 +510,11 @@ TearsheetShell.propTypes = {
    */
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
 
+  /**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: PropTypes.node,
+
   /**
    * The main title of the tearsheet, displayed in the header area.
    */
diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.stories.js b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.stories.js
index 9c1b5a70f7..8b4f111c21 100644
--- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.stories.js
+++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.stories.js
@@ -14,7 +14,11 @@ import {
 } from '../../global/js/utils/story-helper';
 import { TearsheetShell, deprecatedProps } from './TearsheetShell';
 import { getDeprecatedArgTypes } from '../../global/js/utils/props-helper';
-import { Button } from '@carbon/react';
+import {
+  Button,
+  unstable__Slug as Slug,
+  unstable__SlugContent as SlugContent,
+} from '@carbon/react';
 
 // import mdx from './TearsheetShell.mdx';
 
@@ -28,7 +32,23 @@ export default {
   },
   argTypes: {
     ...getDeprecatedArgTypes(deprecatedProps),
+    influencer: {
+      control: {
+        type: 'boolean',
+      },
+    },
     portalTarget: { control: { disable: true } },
+    slug: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'No AI slug',
+          1: 'with AI Slug',
+        },
+        default: 0,
+      },
+      options: [0, 1],
+    },
   },
 };
 
@@ -50,8 +70,28 @@ const dummyContent = (
   </div>
 );
 
+const sampleSlug = (
+  <Slug className="slug-container" size="xs">
+    <SlugContent>
+      <div>
+        <p className="secondary">AI Explained</p>
+        <h1>84%</h1>
+        <p className="secondary bold">Confidence score</p>
+        <p className="secondary">
+          This is not really Lorem Ipsum but the spell checker did not like the
+          previous text with it&apos;s non-words which is why this unwieldy
+          sentence, should one choose to call it that, here.
+        </p>
+        <hr />
+        <p className="secondary">Model type</p>
+        <p className="bold">Foundation model</p>
+      </div>
+    </SlugContent>
+  </Slug>
+);
+
 // Template.
-const Template = ({ open: _open, ...args }, context) => {
+const Template = ({ influencer, open: _open, slug, ...args }, context) => {
   const ref = useRef();
   const [open, setOpen] = useState(context.viewMode !== 'docs' && _open);
   const [beenOpen, setBeenOpen] = useState(false);
@@ -65,8 +105,17 @@ const Template = ({ open: _open, ...args }, context) => {
       <TearsheetShell
         className={className}
         {...args}
+        influencer={
+          influencer && (
+            <div className="tearsheet-stories__dummy-content-block">
+              Influencer
+            </div>
+          )
+        }
         open={open}
         onClose={() => setOpen(false)}
+        slug={slug && sampleSlug}
+        title={'Tearsheet title'}
       >
         {dummyContent}
       </TearsheetShell>
diff --git a/scripts/example-gallery-builder/update-example/templates-react-16/package.json b/scripts/example-gallery-builder/update-example/templates-react-16/package.json
index 667668e3e3..639bbfcc56 100644
--- a/scripts/example-gallery-builder/update-example/templates-react-16/package.json
+++ b/scripts/example-gallery-builder/update-example/templates-react-16/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@carbon/ibm-products": "^2.21.0",
-    "@carbon/react": "^1.48.1",
+    "@carbon/react": "^1.49.0",
     "lodash": "^4.17.21",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
diff --git a/scripts/example-gallery-builder/update-example/templates-react-17/package.json b/scripts/example-gallery-builder/update-example/templates-react-17/package.json
index 8acb93467c..060a943fd7 100644
--- a/scripts/example-gallery-builder/update-example/templates-react-17/package.json
+++ b/scripts/example-gallery-builder/update-example/templates-react-17/package.json
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@carbon/ibm-products": "^2.21.0",
-    "@carbon/react": "^1.48.1",
+    "@carbon/react": "^1.49.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",