diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
index e14c6e828..c7263ec47 100644
--- a/src/components/DocumentationTopic.vue
+++ b/src/components/DocumentationTopic.vue
@@ -296,6 +296,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disableHeroBackground: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.references change, the provided value
@@ -334,7 +338,18 @@ export default {
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath, isTargetIDE }) => (
       !!(objcPath && swiftPath && isTargetIDE)
     ),
-    enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
+    enhanceBackground: ({ symbolKind, disableHeroBackground, topicSectionsStyle }) => {
+      if (
+        // if the hero bg is forcefully disabled
+        disableHeroBackground
+        // or the topicSectionsStyle is a `grid` type
+        || topicSectionsStyle === TopicSectionsStyle.compactGrid
+        || topicSectionsStyle === TopicSectionsStyle.detailedGrid
+      ) {
+        return false;
+      }
+      return symbolKind ? (symbolKind === 'module') : true;
+    },
     shortHero: ({
       roleHeading,
       abstract,
diff --git a/tests/unit/components/DocumentationTopic.spec.js b/tests/unit/components/DocumentationTopic.spec.js
index fa2d5a783..00a031f83 100644
--- a/tests/unit/components/DocumentationTopic.spec.js
+++ b/tests/unit/components/DocumentationTopic.spec.js
@@ -293,6 +293,22 @@ describe('DocumentationTopic', () => {
     });
   });
 
+  it('renders a `DocumentationHero`, disabled, if `disableHeroBackground` prop is `true`', () => {
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props('enhanceBackground')).toBe(true);
+    wrapper.setProps({ disableHeroBackground: true });
+    expect(hero.props('enhanceBackground')).toBe(false);
+  });
+
+  it('renders a `DocumentationHero`, disabled, if the `topicSectionsStyle` is a grid type', () => {
+    const hero = wrapper.find(DocumentationHero);
+    expect(hero.props('enhanceBackground')).toBe(true);
+    wrapper.setProps({ topicSectionsStyle: TopicSectionsStyle.detailedGrid });
+    expect(hero.props('enhanceBackground')).toBe(false);
+    wrapper.setProps({ topicSectionsStyle: TopicSectionsStyle.compactGrid });
+    expect(hero.props('enhanceBackground')).toBe(false);
+  });
+
   it('renders a `Title`', () => {
     const hero = wrapper.find(DocumentationHero);
 
@@ -463,7 +479,7 @@ describe('DocumentationTopic', () => {
     });
   });
 
-  it('renders `Topics` if there are topic sections, passing the `topicSectionStyles` over', () => {
+  it('renders `Topics` if there are topic sections, passing the `topicSectionsStyle` over', () => {
     expect(wrapper.contains(Topics)).toBe(false);
 
     const topicSections = [
diff --git a/tests/unit/views/DocumentationTopic.spec.js b/tests/unit/views/DocumentationTopic.spec.js
index 0b19dcae6..dc42f9c99 100644
--- a/tests/unit/views/DocumentationTopic.spec.js
+++ b/tests/unit/views/DocumentationTopic.spec.js
@@ -543,6 +543,7 @@ describe('DocumentationTopic', () => {
       },
       enableOnThisPageNav: false,
       topicSectionsStyle: TopicSectionsStyle.list, // default value
+      disableHeroBackground: false,
     });
   });