diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
index fc205dde..211a9f7b 100644
--- a/apps/vue-storybook/.storybook/preview.ts
+++ b/apps/vue-storybook/.storybook/preview.ts
@@ -190,7 +190,23 @@ const preview: Preview = {
           'Mixins',
           ['Overview'],
           'Templates',
-          ['WWW', 'EDU', 'PageContent']
+          [
+            'WWW',
+            'EDU',
+            [
+              'PageContent',
+              'PageEduNewsDetail',
+              'PageEduEventDetail',
+              'PageEduCollectionsDetail',
+              'PageEduExplainerArticle',
+              'PageEduLesson',
+              'PageEduStudentProject',
+              'PageEduTeachableMoment',
+              'PageEduMultimediaDetail',
+              '*'
+            ],
+            'PageContent'
+          ]
         ]
       }
     }
diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.vue b/packages/vue/src/components/HeroMedia/HeroMedia.vue
index a3f274a0..f4451fbb 100644
--- a/packages/vue/src/components/HeroMedia/HeroMedia.vue
+++ b/packages/vue/src/components/HeroMedia/HeroMedia.vue
@@ -109,7 +109,7 @@ export default defineComponent({
   computed: {
     ...mapStores(useThemeStore),
     theImageCaption(): string | undefined {
-      if (this.image && this.caption && this.caption.length > 2 && this.displayCaption) {
+      if (this.displayCaption && this.image && this.caption && this.caption.length > 2) {
         return this.caption
       } else if (
         this.image &&
@@ -135,10 +135,12 @@ export default defineComponent({
     },
     // to handle captions for videos
     customCaption(): Partial<ImageObject> | undefined {
-      if ((this.caption && this.caption.length > 2) || this.credit) {
-        return {
-          caption: this.caption,
-          credit: this.credit
+      if (this.displayCaption) {
+        if ((this.caption && this.caption.length > 2) || this.credit) {
+          return {
+            caption: this.caption,
+            credit: this.credit
+          }
         }
       }
       return undefined
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index 7fc3cdaa..e7416ad0 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -38,6 +38,7 @@ export interface StreamfieldBlockData extends BlockData {
   caption?: string
   credit?: string
   imageInline?: ImageObject
+  heroSummary?: string
 }
 
 export interface ImageSrcObject {
diff --git a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js
index 3dd4359d..7deb8908 100644
--- a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js
+++ b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js
@@ -109,6 +109,22 @@ export const BaseStory = {
     }
   }
 }
+
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
 export const InlineHero = {
   args: {
     data: {
diff --git a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
index e46964d2..92013269 100644
--- a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
+++ b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
@@ -25,7 +26,8 @@ export default defineComponent({
     BlockLinkCarousel,
     BlockRelatedLinks,
     BlockText,
-    NavJumpMenu
+    NavJumpMenu,
+    HeroLarge
   },
   props: {
     data: {
@@ -36,16 +38,35 @@ export default defineComponent({
   },
   computed: {
     heroEmpty(): boolean {
-      return (this.data?.hero || []).length === 0
+      return this.data?.hero?.length === 0
+    },
+    theHero() {
+      if (this.data?.hero?.length) {
+        return this.data.hero[0]
+      }
+      return undefined
+    },
+    heroTitle(): boolean {
+      if (this.theHero) {
+        // excludes VideoBlock as this will autoplay
+        if (this.theHero.blockType === 'HeroTitleBlock') {
+          return true
+        }
+      }
+      return false
     },
     heroInline(): boolean {
-      if (!this.heroEmpty) {
-        if (this.data?.hero[0].blockType === 'VideoBlock') {
+      // heroes with interactive elements have special handling
+      if (this.theHero && !this.heroTitle) {
+        // excludes VideoBlock as this will autoplay
+        if (this.theHero.blockType === 'VideoBlock') {
           return false
         } else if (
           this.data?.heroPosition === 'inline' ||
-          this.data?.hero[0].blockType === 'CarouselBlock' ||
-          this.data?.hero[0].blockType === 'VideoEmbedBlock'
+          this.theHero.blockType === 'CarouselBlock' ||
+          this.theHero.blockType === 'IframeEmbedBlock' ||
+          this.theHero.blockType === 'VideoEmbedBlock' ||
+          this.theHero.blockType === 'ImageComparisonBlock'
         ) {
           return true
         }
@@ -77,20 +98,29 @@ export default defineComponent({
       itemprop="image"
       :content="data.thumbnailImage.original"
     />
-
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
     <!-- hero image -->
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
       class="md:mb-12 lg:mb-18 mb-10"
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="data.hero[0].displayCaption"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
 
@@ -100,6 +130,7 @@ export default defineComponent({
       class="mb-10"
     >
       <DetailHeadline
+        v-if="!heroTitle"
         :title="data.title"
         :read-time="data.readTime"
         :publication-date="data.publicationDate"
@@ -112,7 +143,7 @@ export default defineComponent({
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
index 8fd29206..1829352f 100644
--- a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
+++ b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
@@ -58,7 +58,8 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
-      heroConstrain: true,
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       studentProject: {
         title: 'Student Project',
@@ -275,6 +276,30 @@ export const BaseStory = {
   }
 }
 
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
 export const HeroCarousel = {
   args: {
     data: {
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
index 840812fa..d3db3586 100644
--- a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
+++ b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
@@ -6,6 +6,7 @@ import type {
   StreamfieldBlockData
 } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
@@ -94,17 +95,35 @@ const heroEmpty = computed((): boolean => {
   return data?.hero?.length === 0
 })
 
+const theHero = computed(() => {
+  if (data?.hero?.length) {
+    return data.hero[0]
+  }
+  return undefined
+})
+
+const heroTitle = computed((): boolean => {
+  if (theHero.value) {
+    // excludes VideoBlock as this will autoplay
+    if (theHero.value.blockType === 'HeroTitleBlock') {
+      return true
+    }
+  }
+  return false
+})
+
 const heroInline = computed((): boolean => {
   // heroes with interactive elements have special handling
-  if (!heroEmpty.value && data?.hero) {
+  if (theHero.value && !heroTitle.value) {
     // excludes VideoBlock as this will autoplay
-    if (data?.hero[0].blockType === 'VideoBlock') {
+    if (theHero.value.blockType === 'VideoBlock') {
       return false
     } else if (
-      data?.hero[0].blockType === 'CarouselBlock' ||
-      data?.hero[0].blockType === 'IframeEmbedBlock' ||
-      data?.hero[0].blockType === 'VideoEmbedBlock' ||
-      data?.hero[0].blockType === 'ImageComparisonBlock'
+      data?.heroPosition === 'inline' ||
+      theHero.value.blockType === 'CarouselBlock' ||
+      theHero.value.blockType === 'IframeEmbedBlock' ||
+      theHero.value.blockType === 'VideoEmbedBlock' ||
+      theHero.value.blockType === 'ImageComparisonBlock'
     ) {
       return true
     }
@@ -251,24 +270,43 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
 
   return filteredSections
 })
+const computedClass = computed((): string => {
+  if (heroInline.value || heroEmpty.value) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
 </script>
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight pt-5 lg:pt-12"
+    class="ThemeVariantLight"
+    :class="computedClass"
   >
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
+
     <LayoutHelper
       indent="col-2"
       class="mb-10"
     >
       <DetailHeadline
+        v-if="data.title && !heroTitle"
         :title="data.title"
         label="Lesson"
         pill
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -290,29 +328,30 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
     <MetaPanel
       button="View Standards"
       theme="primary"
-      :class="{ 'mb-10 lg:mb-14': heroInline || data?.hero?.length === 0 }"
+      :class="{ 'mb-10 lg:mb-14': heroTitle || heroInline || data?.hero?.length === 0 }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :time="data.customTime ? { time: data.customTime } : data.time"
       :grade-levels="data.gradeLevels"
       :standards="data.standards"
-      :negative-bottom="heroInline || data?.hero?.length !== 0"
+      :negative-bottom="(heroInline || data?.hero?.length !== 0) && !heroTitle"
     />
 
     <!-- hero media -->
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        data?.hero?.length &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
       class="md:mb-12 lg:mb-18 mb-10"
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="data.hero[0].displayCaption"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
 
diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js
index f962ef92..f1c25479 100644
--- a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js
+++ b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js
@@ -56,9 +56,12 @@ export const BaseStory = {
       hero: [
         {
           ...HeroMediaData,
-          blockType: 'HeroImageBlock'
+          blockType: 'HeroImageBlock',
+          displayCaption: false
         }
       ],
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       lesson: {
         title: 'Lesson',
@@ -130,7 +133,7 @@ export const BaseStory = {
       materialsHeading: 'Custom Materials Heading',
       materialsImage: BlockImageData.image,
 
-      stepsNumbering: false,
+      stepsNumbering: true,
 
       steps: [
         {
@@ -175,6 +178,29 @@ export const BaseStory = {
   }
 }
 
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
 export const HeroCarousel = {
   args: {
     data: {
@@ -223,7 +249,8 @@ export const HeroVideoEmbed = {
           embed: {
             embed: `<iframe title="Meet NASA's Diana Trujillo - Embedded Hero" width="480" height="270" src="https://www.youtube.com/embed/vUuUyYqI83Q?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
           },
-          blockType: 'VideoEmbedBlock'
+          blockType: 'VideoEmbedBlock',
+          displayCaption: false
         }
       ]
     }
diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue
index ede26b5f..9130423f 100644
--- a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue
+++ b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue
@@ -6,6 +6,7 @@ import type {
   StreamfieldBlockData
 } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BaseLink from './../../../components/BaseLink/BaseLink.vue'
 import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
@@ -83,17 +84,35 @@ const heroEmpty = computed((): boolean => {
   return data?.hero?.length === 0
 })
 
+const theHero = computed(() => {
+  if (data?.hero?.length) {
+    return data.hero[0]
+  }
+  return undefined
+})
+
+const heroTitle = computed((): boolean => {
+  if (theHero.value) {
+    // excludes VideoBlock as this will autoplay
+    if (theHero.value.blockType === 'HeroTitleBlock') {
+      return true
+    }
+  }
+  return false
+})
+
 const heroInline = computed((): boolean => {
   // heroes with interactive elements have special handling
-  if (!heroEmpty.value && data?.hero) {
+  if (theHero.value && !heroTitle.value) {
     // excludes VideoBlock as this will autoplay
-    if (data?.hero[0].blockType === 'VideoBlock') {
+    if (theHero.value.blockType === 'VideoBlock') {
       return false
     } else if (
-      data?.hero[0].blockType === 'CarouselBlock' ||
-      data?.hero[0].blockType === 'IframeEmbedBlock' ||
-      data?.hero[0].blockType === 'VideoEmbedBlock' ||
-      data?.hero[0].blockType === 'ImageComparisonBlock'
+      data?.heroPosition === 'inline' ||
+      theHero.value.blockType === 'CarouselBlock' ||
+      theHero.value.blockType === 'IframeEmbedBlock' ||
+      theHero.value.blockType === 'VideoEmbedBlock' ||
+      theHero.value.blockType === 'ImageComparisonBlock'
     ) {
       return true
     }
@@ -230,13 +249,34 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
 const studentBadge = computed(() => {
   return StudentProjectBadge
 })
+
+const computedClass = computed((): string => {
+  if (heroInline.value || heroEmpty.value) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
 </script>
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight pt-5 lg:pt-12"
+    class="ThemeVariantLight"
+    :class="computedClass"
   >
-    <div class="BaseGrid hidden lg:block container relative mx-auto z-20 pointer-events-none">
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
+    <div
+      v-if="!heroTitle"
+      class="BaseGrid hidden lg:block container relative mx-auto z-20 pointer-events-none"
+    >
       <div class="absolute top-0 left-0 col-start-1 col-end-3 text-right lg:-ml-2 xl:ml-4">
         <img
           :src="studentBadge"
@@ -252,7 +292,7 @@ const studentBadge = computed(() => {
       class="mb-10"
     >
       <DetailHeadline
-        v-if="data.title"
+        v-if="data.title && !heroTitle"
         :title="data.title"
         label="Student Project"
         pill
@@ -260,7 +300,7 @@ const studentBadge = computed(() => {
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -280,7 +320,10 @@ const studentBadge = computed(() => {
       </div>
     </LayoutHelper>
 
-    <div class="container relative mx-auto z-20 pointer-events-none">
+    <div
+      v-if="!heroTitle"
+      class="container relative mx-auto z-20 pointer-events-none"
+    >
       <img
         :src="studentBadge"
         alt=""
@@ -293,15 +336,16 @@ const studentBadge = computed(() => {
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        data?.hero?.length &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="false"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
     <LayoutHelper
@@ -322,7 +366,7 @@ const studentBadge = computed(() => {
       :additional-subjects="data.additionalSubjects"
       :time="data.customTime ? { time: data.customTime } : data.time"
       :standards="data.standards"
-      :negative-top="!heroInline && !heroEmpty"
+      :negative-top="!heroInline && !heroEmpty && !heroTitle"
     >
       <template #metaInfo>
         <div :class="data?.standards ? 'border-b border-gray-light-mid' : ''">
diff --git a/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.stories.js b/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.stories.js
index bb0ecfe6..8e6d2107 100644
--- a/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.stories.js
+++ b/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.stories.js
@@ -56,7 +56,8 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
-      heroConstrain: true,
+      heroConstrain: false,
+      heroPosition: 'full_bleed',
 
       body: BlockStreamfieldTruncatedData.body,
 
@@ -67,6 +68,30 @@ export const BaseStory = {
   }
 }
 
+export const HeroTitle = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          ...HeroMediaData,
+          heroSummary: 'Text appears below the title',
+          blockType: 'HeroTitleBlock'
+        }
+      ]
+    }
+  }
+}
+
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
 export const HeroCarousel = {
   args: {
     data: {
diff --git a/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue b/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue
index 5567b19e..c1f711ec 100644
--- a/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue
+++ b/packages/vue/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, ref } from 'vue'
 import type { PageEduResourcesObject } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
@@ -33,17 +34,35 @@ const heroEmpty = computed((): boolean => {
   return data?.hero?.length === 0
 })
 
+const theHero = computed(() => {
+  if (data?.hero?.length) {
+    return data.hero[0]
+  }
+  return undefined
+})
+
+const heroTitle = computed((): boolean => {
+  if (theHero.value) {
+    // excludes VideoBlock as this will autoplay
+    if (theHero.value.blockType === 'HeroTitleBlock') {
+      return true
+    }
+  }
+  return false
+})
+
 const heroInline = computed((): boolean => {
   // heroes with interactive elements have special handling
-  if (!heroEmpty.value && data?.hero) {
+  if (theHero.value && !heroTitle.value) {
     // excludes VideoBlock as this will autoplay
-    if (data?.hero[0].blockType === 'VideoBlock') {
+    if (theHero.value.blockType === 'VideoBlock') {
       return false
     } else if (
-      data?.hero[0].blockType === 'CarouselBlock' ||
-      data?.hero[0].blockType === 'IframeEmbedBlock' ||
-      data?.hero[0].blockType === 'VideoEmbedBlock' ||
-      data?.hero[0].blockType === 'ImageComparisonBlock'
+      data?.heroPosition === 'inline' ||
+      theHero.value.blockType === 'CarouselBlock' ||
+      theHero.value.blockType === 'IframeEmbedBlock' ||
+      theHero.value.blockType === 'VideoEmbedBlock' ||
+      theHero.value.blockType === 'ImageComparisonBlock'
     ) {
       return true
     }
@@ -73,21 +92,29 @@ const computedClass = computed((): string => {
       :blocks="data.body"
       dropdown-text="In this Teachable Moment"
     />
-
+    <!-- hero title -->
+    <HeroLarge
+      v-if="heroTitle && theHero"
+      :title="data.title"
+      :image="theHero.image"
+      :summary="theHero.heroSummary"
+      :custom-pill-type="data.__typename"
+    />
     <!-- hero media -->
     <HeroMedia
       v-if="
         !heroEmpty &&
+        !heroTitle &&
         !heroInline &&
-        data?.hero?.length &&
-        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].blockType === 'VideoBlock')
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
       "
       class="md:mb-12 lg:mb-18 mb-10"
-      :image="data.hero[0].image"
-      :video="data.hero[0].video"
-      :display-caption="data.hero[0].displayCaption"
-      :caption="data.hero[0].caption"
-      :credit="data.hero[0].credit"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
       :constrain="data.heroConstrain"
     />
 
@@ -96,6 +123,7 @@ const computedClass = computed((): string => {
       class="mb-10"
     >
       <DetailHeadline
+        v-if="!heroTitle"
         :title="data.title"
         :read-time="data.readTime"
         label="Teachable Moment"
@@ -103,7 +131,7 @@ const computedClass = computed((): string => {
       />
       <ShareButtonsEdu
         v-if="data?.url"
-        class="mt-4"
+        :class="heroTitle ? 'mt-10' : 'mt-4'"
         :url="data.url"
         :title="data.title"
         :image="data.thumbnailImage?.original"
@@ -122,11 +150,11 @@ const computedClass = computed((): string => {
 
     <!-- summary and topper -->
     <LayoutHelper
+      v-if="data.topper && data.topper.length > 2"
       indent="col-3"
       class="lg:mb-8 mb-5"
     >
       <BlockText
-        v-if="data.topper && data.topper.length > 2"
         class="lg:mb-8 mb-5"
         :text="data.topper"
       />