diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
index 263cf4ba..38593055 100644
--- a/apps/vue-storybook/.storybook/preview.ts
+++ b/apps/vue-storybook/.storybook/preview.ts
@@ -6,6 +6,7 @@ import { createRouter, createWebHashHistory, type RouterOptions } from 'vue-rout
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
+import { BindOncePlugin } from 'vue-bind-once'
 import { createPinia } from 'pinia'
 import filters from '@explorer-1/vue/src/utils/filters'
 import '@explorer-1/common/src/scss/styles-with-fonts.scss'
@@ -38,6 +39,7 @@ setup((app, _context) => {
   app.use(router)
   app.use(vClickOutside)
   app.use(VueCompareImage)
+  app.use(BindOncePlugin)
   app.component('Swiper', Swiper)
   app.component('SwiperSlide', SwiperSlide)
   app.config.globalProperties.$filters = filters
diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
index 4db6b08a..181fd941 100644
--- a/apps/vue-storybook/package.json
+++ b/apps/vue-storybook/package.json
@@ -44,6 +44,7 @@
     "mitt": "^3.0.1",
     "swiper": "^11.1.3",
     "vue": "^3.2.47",
+    "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5"
   },
   "devDependencies": {
diff --git a/packages/common/src/scss/_grid.scss b/packages/common/src/scss/_grid.scss
index 6dc03422..c2084df6 100644
--- a/packages/common/src/scss/_grid.scss
+++ b/packages/common/src/scss/_grid.scss
@@ -6,27 +6,27 @@
 
   .MixedBleedGrid {
     @screen sm {
-      grid-template-columns: [bleed-start] auto [container-start] 53.33px [indent-col-2] 53.33px [indent-col-3] 533.33px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 53.33px [indent-col-2] 53.33px [indent-col-3] 533.33px [container-end] 1fr [bleed-end];
       @apply grid gap-0;
     }
 
     @screen md {
-      grid-template-columns: [bleed-start] auto [container-start] 64px [indent-col-2] 64px [indent-col-3] 640px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 64px [indent-col-2] 64px [indent-col-3] 640px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
     @screen lg {
-      grid-template-columns: [bleed-start] auto [container-start] 85.33px [indent-col-2] 85.33px [indent-col-3] 853.33px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 85.33px [indent-col-2] 85.33px [indent-col-3] 853.33px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
     @screen xl {
-      grid-template-columns: [bleed-start] auto [container-start] 108px [indent-col-2] 108px [indent-col-3] 1088px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 108px [indent-col-2] 108px [indent-col-3] 1088px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
     @screen 2xl {
-      grid-template-columns: [bleed-start] auto [container-start] 110px [indent-col-2] 110px [indent-col-3] 1100px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 110px [indent-col-2] 110px [indent-col-3] 1100px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
@@ -42,6 +42,10 @@
       grid-column-start: container-start;
     }
 
+    .col-start-indent-col-1 {
+      grid-column-start: indent-col-1;
+    }
+
     .col-start-indent-col-2 {
       grid-column-start: indent-col-2;
     }
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 4276342e..c2f78e81 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -38,6 +38,7 @@
     "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",
     "vue": "^3.4.21",
+    "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5"
   },
diff --git a/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.stories.js b/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.stories.js
new file mode 100644
index 00000000..f3be33b0
--- /dev/null
+++ b/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.stories.js
@@ -0,0 +1,15 @@
+import BaseAccordionItem from './BaseAccordionItem.vue'
+import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+export default {
+  title: 'Components/Base/BaseAccordionItem',
+  component: BaseAccordionItem
+}
+
+// stories
+export const BaseStory = {
+  name: 'BaseAccordionItem',
+  args: {
+    headingLevel: 'h3',
+    item: { title: 'Title for the accordion', body: BlockStreamfieldTruncatedData.body }
+  }
+}
diff --git a/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.vue b/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.vue
new file mode 100644
index 00000000..5eb2951a
--- /dev/null
+++ b/packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { AccordionItemObject } from './../../interfaces.ts'
+import { uniqueId } from 'lodash'
+import IconPlus from './../Icons/IconPlus.vue'
+import BlockStreamfield from './../BlockStreamfield/BlockStreamfield.vue'
+
+export interface BaseAccordionItemProps {
+  headingLevel?: string
+  item: AccordionItemObject
+  backgroundClass?: string
+}
+
+// define props
+const props = withDefaults(defineProps<BaseAccordionItemProps>(), {
+  headingLevel: 'h2',
+  backgroundClass: undefined,
+  item(): AccordionItemObject {
+    return {
+      title: undefined,
+      body: undefined
+    }
+  }
+})
+
+const { headingLevel, item } = reactive(props)
+
+const ariaExpanded = ref(false)
+const isHidden = ref(true)
+const itemId = ref(uniqueId())
+
+const panelId = computed(() => {
+  return `block_accordion_panel_${itemId.value}`
+})
+
+const headingId = computed(() => {
+  return `block_accordion_heading_${itemId.value}`
+})
+
+const handleClick = () => {
+  ariaExpanded.value = !ariaExpanded.value
+  isHidden.value = !isHidden.value
+  if (isHidden.value) {
+    emit('accordionItemClosed')
+  } else {
+    emit('accordionItemOpened')
+  }
+}
+
+const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
+</script>
+<template>
+  <div
+    class="BaseAccordionItem"
+    :class="{ '-open': !isHidden }"
+  >
+    <div class="BaseAccordionHeader">
+      <slot name="header">
+        <div
+          v-if="headingLevel && item"
+          class="border-b border-gray-light-mid"
+        >
+          <component :is="headingLevel">
+            <button
+              v-bind-once="{ id: headingId, 'aria-controls': panelId }"
+              :aria-expanded="ariaExpanded"
+              class="BaseAccordion-trigger group flex flex-nowrap justify-between items-center w-full can-hover:hover:underline text-body-lg"
+              @click="handleClick()"
+            >
+              <slot name="heading">
+                <div class="pointer-events-none text-left p-4 xl:py-6">
+                  {{ item.title }}
+                </div>
+              </slot>
+              <span
+                class="BaseAccordion-icon pointer-events-none text-xs text-action flex-shrink-0 transform transition-transform"
+                :class="{ 'rotate-45': !isHidden }"
+              >
+                <IconPlus />
+              </span>
+            </button>
+          </component>
+        </div>
+      </slot>
+    </div>
+    <div
+      v-show="!isHidden"
+      class="BaseAccordionContent"
+    >
+      <slot>
+        <div
+          v-bind-once="{ id: panelId, 'aria-labelledby': headingId }"
+          role="region"
+          class="BaseAccordion-panel"
+        >
+          <slot name="panelContents">
+            <div class="px-4 pb-8">
+              <BlockStreamfield
+                :data="item.body"
+                variant="fluid"
+              />
+            </div>
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/vue/src/components/BaseButton/BaseButton.vue b/packages/vue/src/components/BaseButton/BaseButton.vue
index def78f93..6b0fd495 100644
--- a/packages/vue/src/components/BaseButton/BaseButton.vue
+++ b/packages/vue/src/components/BaseButton/BaseButton.vue
@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
@@ -11,6 +11,11 @@ export const variants: Variants = {
   dark: '-dark',
   social: '-social'
 }
+export const colors: Variants = {
+  primary: '-color-primary',
+  secondary: '-color-secondary',
+  action: '-color-action'
+}
 
 export default defineComponent({
   name: 'BaseButton',
@@ -21,6 +26,12 @@ export default defineComponent({
       default: 'primary',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
+    color: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: (prop: string): boolean => Object.keys(colors).includes(prop)
+    },
     compact: {
       type: Boolean,
       default: false,
diff --git a/packages/vue/src/components/BaseImage/BaseImage.vue b/packages/vue/src/components/BaseImage/BaseImage.vue
index 7793a5c5..a0c9e8f0 100644
--- a/packages/vue/src/components/BaseImage/BaseImage.vue
+++ b/packages/vue/src/components/BaseImage/BaseImage.vue
@@ -5,7 +5,7 @@ import type { PropType } from 'vue'
 export type ImageLoader = 'lazy' | 'eager' | undefined
 
 interface ObjectFitClasses {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const objectFitClasses: ObjectFitClasses = {
diff --git a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue
index e8498acf..7bc19775 100644
--- a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue
+++ b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue
@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface AspectRatios {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const aspectRatios: AspectRatios = {
diff --git a/packages/vue/src/components/BaseLink/BaseLink.vue b/packages/vue/src/components/BaseLink/BaseLink.vue
index 74c2b37e..5d8fd291 100644
--- a/packages/vue/src/components/BaseLink/BaseLink.vue
+++ b/packages/vue/src/components/BaseLink/BaseLink.vue
@@ -4,7 +4,7 @@ import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
diff --git a/packages/vue/src/components/BlockAccordion/BlockAccordion.stories.js b/packages/vue/src/components/BlockAccordion/BlockAccordion.stories.js
new file mode 100644
index 00000000..3a1239b8
--- /dev/null
+++ b/packages/vue/src/components/BlockAccordion/BlockAccordion.stories.js
@@ -0,0 +1,29 @@
+import BlockAccordion from './BlockAccordion.vue'
+import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+
+export default {
+  title: 'Components/Blocks/BlockAccordion',
+  component: BlockAccordion
+}
+
+// stories
+export const BaseStory = {
+  name: 'BlockAccordion',
+  args: {
+    headingLevel: 'h5',
+    items: [
+      {
+        title: 'Title for the accordion',
+        body: BlockStreamfieldTruncatedData.body
+      },
+      {
+        title: 'Another',
+        body: BlockStreamfieldTruncatedData.body
+      },
+      {
+        title: 'Yet another',
+        body: BlockStreamfieldTruncatedData.body
+      }
+    ]
+  }
+}
diff --git a/packages/vue/src/components/BlockAccordion/BlockAccordion.vue b/packages/vue/src/components/BlockAccordion/BlockAccordion.vue
new file mode 100644
index 00000000..666182e6
--- /dev/null
+++ b/packages/vue/src/components/BlockAccordion/BlockAccordion.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { AccordionItemObject } from '../../interfaces'
+import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
+
+interface BlockAccordionProps {
+  autoClose?: boolean
+  headingLevel?: string
+  items?: AccordionItemObject[]
+}
+
+// define props
+const props = withDefaults(defineProps<BlockAccordionProps>(), {
+  autoClose: false,
+  headingLevel: 'h2',
+  items: undefined
+})
+
+const { headingLevel, items } = reactive(props)
+</script>
+<template>
+  <div class="BlockAccordion">
+    <slot>
+      <BaseAccordionItem
+        v-for="(item, index) in items"
+        :key="index"
+        :heading-level="headingLevel"
+        :item="item"
+      />
+    </slot>
+  </div>
+</template>
diff --git a/packages/vue/src/components/BlockHeading/BlockHeading.stories.js b/packages/vue/src/components/BlockHeading/BlockHeading.stories.js
index fb04ae4f..a5da7129 100644
--- a/packages/vue/src/components/BlockHeading/BlockHeading.stories.js
+++ b/packages/vue/src/components/BlockHeading/BlockHeading.stories.js
@@ -1,5 +1,4 @@
 import BlockHeading from './BlockHeading.vue'
-
 export default {
   title: 'Components/Blocks/BlockHeading',
   component: BlockHeading,
@@ -10,7 +9,8 @@ export const BlockHeadingData = {
   blockType: 'HeadingBlock',
   heading: 'Heading Text',
   level: 'h2',
-  size: 'h2'
+  size: 'h2',
+  blockId: `${Math.random().toString(36).slice(2)}`
 }
 
 // stories
diff --git a/packages/vue/src/components/BlockHeading/BlockHeading.vue b/packages/vue/src/components/BlockHeading/BlockHeading.vue
index c583a639..254d6682 100644
--- a/packages/vue/src/components/BlockHeading/BlockHeading.vue
+++ b/packages/vue/src/components/BlockHeading/BlockHeading.vue
@@ -11,10 +11,20 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import { type HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import { getHeadingId } from '../../utils/getHeadingId'
+
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
+export interface BlockHeadingObject {
+  blockType?: string
+  heading: HeadingLevel
+  level?: HeadingLevel
+  size?: string
+  blockId?: string
+}
+
 export default defineComponent({
   name: 'BlockHeading',
   components: {
@@ -22,11 +32,7 @@ export default defineComponent({
   },
   props: {
     data: {
-      type: Object,
-      required: false
-    },
-    index: {
-      type: Number,
+      type: Object as PropType<BlockHeadingObject>,
       required: false,
       default: undefined
     },
@@ -37,7 +43,9 @@ export default defineComponent({
   },
   computed: {
     getId() {
-      return this.generateId ? getHeadingId(this.data?.heading, this.index) : undefined
+      return this.data && this.generateId
+        ? getHeadingId(this.data.heading, this.data.blockId)
+        : undefined
     }
   }
 })
diff --git a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
index cc7c8c55..f5260eed 100644
--- a/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
+++ b/packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue
@@ -21,7 +21,7 @@ import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
 import BlockLinkTile from './../BlockLinkTile/BlockLinkTile.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const itemTypes: Variants = {
diff --git a/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue b/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue
index 63bb883d..3a9c60c3 100644
--- a/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue
+++ b/packages/vue/src/components/BlockRelatedLinks/RelatedLink.vue
@@ -24,7 +24,7 @@ import IconDownload from './../Icons/IconDownload.vue'
 import IconExternal from './../Icons/IconExternal.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
index 425a5da8..21f24a08 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
@@ -32,24 +32,42 @@ export default {
   excludeStories: /.*(Data)$/
 }
 
+export const BlockStreamfieldMinimalData = {
+  body: [
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
+    },
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    }
+  ]
+}
 export const BlockStreamfieldTruncatedData = {
   body: [
     BlockKeyPointsData,
-    BlockHeadingData,
     {
       blockType: 'RichTextBlock',
       value:
         '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
     },
-    BlockImageComparisonData,
-    BlockHeadingData,
+    { ...BlockHeadingData, blockId: Math.random().toString(36).slice(2) },
     {
       blockType: 'RichTextBlock',
       value:
         '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
     },
-    BlockInlineImageData.block,
-    BlockIframeEmbedData
+    BlockImageData,
+    { ...BlockHeadingData, blockId: Math.random().toString(36).slice(2) },
+    {
+      blockType: 'RichTextBlock',
+      value:
+        '<p>Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p><p>Integer imperdiet blandit neque vitae euismod. Nulla aliquet lacus nibh,  vel tincidunt urna efficitur non. In et eros vitae ex posuere maximus  quis eget urna. Suspendisse fringilla posuere velit sit amet posuere.  Morbi malesuada bibendum vehicula. Donec faucibus ut erat ut mattis.  Suspendisse ornare, quam at placerat cursus, dolor mi lacinia nunc, eget  maximus augue nulla in dolor.</p>\n'
+    },
+    BlockInlineImageData.block
   ]
 }
 export const BlockStreamfieldData = {
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index 4720733f..21825d87 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -12,7 +12,7 @@
         class="mb-5"
       >
         <BlockHeading
-          :data="block"
+          :data="block as BlockHeadingObject"
           :index="index"
           generate-id
         />
@@ -212,13 +212,11 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import type { BlockData, ImageObject } from '../../interfaces'
-import type { BlockData as VideoBlockEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
-import type { BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
+import type { StreamfieldBlockData } from '../../interfaces'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 import BlockCardGrid from './../BlockCardGrid/BlockCardGrid.vue'
 import BlockCta from './../BlockCta/BlockCta.vue'
-import BlockHeading from './../BlockHeading/BlockHeading.vue'
+import BlockHeading, { BlockHeadingObject } from './../BlockHeading/BlockHeading.vue'
 import BlockImage from './../BlockImage/BlockImage.vue'
 import BlockImageCarousel from './../BlockImageCarousel/BlockImageCarousel.vue'
 import BlockImageComparison from './../BlockImageComparison/BlockImageComparison.vue'
@@ -226,7 +224,7 @@ import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
 import BlockInlineImage from './../BlockInlineImage/BlockInlineImage.vue'
 import BlockKeyPoints from './../BlockKeyPoints/BlockKeyPoints.vue'
 import BlockListCards from './../BlockListCards/BlockListCards.vue'
-import BlockQuote from './../BlockQuote/BlockQuote.vue'
+import BlockQuote, { type BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
 import BlockRelatedLinks, {
   type BlockRelatedLinksObject
 } from './../BlockRelatedLinks/BlockRelatedLinks.vue'
@@ -236,10 +234,12 @@ import BlockText from './../BlockText/BlockText.vue'
 import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockVideo from './../BlockVideo/BlockVideo.vue'
-import BlockVideoEmbed from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import BlockVideoEmbed, {
+  type BlockData as VideoBlockEmbedData
+} from './../BlockVideoEmbed/BlockVideoEmbed.vue'
 import BlockAnchor from './../BlockAnchor/BlockAnchor.vue'
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
@@ -247,24 +247,6 @@ export const variants: Variants = {
   fluid: '-fluid'
 }
 
-export interface StreamfieldBlockData extends BlockData {
-  id: string
-  fullBleed: boolean
-  heading: string
-  galleryTitle: string
-  galleryDescription: string
-  coverImage: ImageObject
-  gallerySlides: ImageObject[]
-  blocks: object[]
-  value: string
-  customLabel: string
-  introduction: string
-  teaserPage: object | string[]
-  image: ImageObject
-  buttonText: string
-  fullWidthImage: boolean
-}
-
 export default defineComponent({
   name: 'BlockStreamfield',
   components: {
diff --git a/packages/vue/src/components/BlockText/BlockText.vue b/packages/vue/src/components/BlockText/BlockText.vue
index ed97df47..adda55a4 100644
--- a/packages/vue/src/components/BlockText/BlockText.vue
+++ b/packages/vue/src/components/BlockText/BlockText.vue
@@ -9,7 +9,7 @@
 import { defineComponent } from 'vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
diff --git a/packages/vue/src/components/HeroMedia/HeroMedia.vue b/packages/vue/src/components/HeroMedia/HeroMedia.vue
index f39620e7..de457e8f 100644
--- a/packages/vue/src/components/HeroMedia/HeroMedia.vue
+++ b/packages/vue/src/components/HeroMedia/HeroMedia.vue
@@ -53,6 +53,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import MixinVideoBg from './../MixinVideoBg/MixinVideoBg.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import IconInfo from './../Icons/IconInfo.vue'
@@ -105,6 +107,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theImageCaption(): string | undefined {
       if (this.image && this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -149,7 +152,13 @@ export default defineComponent({
     },
     hasCaptionArea(): string | boolean {
       if (this.theImageData) {
-        return this.theImageCaption || this.image?.credit || this.image?.detailUrl
+        if (this.themeStore.isEdu) {
+          // For EDU, only show the caption area if there is a caption
+          return this.theImageCaption ? this.theImageCaption : false
+        } else {
+          // For others, show the caption area if there is also a credit or detail URL
+          return this.theImageCaption || this.image?.credit || this.image?.detailUrl
+        }
       } else if (this.customCaption) {
         return true
       }
diff --git a/packages/vue/src/components/LayoutHelper/LayoutHelper.vue b/packages/vue/src/components/LayoutHelper/LayoutHelper.vue
index b7d0fce9..500b0159 100644
--- a/packages/vue/src/components/LayoutHelper/LayoutHelper.vue
+++ b/packages/vue/src/components/LayoutHelper/LayoutHelper.vue
@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface Indents {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const indents: Indents = {
diff --git a/packages/vue/src/components/MetaPanel/MetaPanel.stories.js b/packages/vue/src/components/MetaPanel/MetaPanel.stories.js
new file mode 100644
index 00000000..a760a65d
--- /dev/null
+++ b/packages/vue/src/components/MetaPanel/MetaPanel.stories.js
@@ -0,0 +1,112 @@
+import MetaPanel from './MetaPanel.vue'
+
+export default {
+  title: 'Components/Utilities/MetaPanel',
+  component: MetaPanel,
+  tags: ['!autodocs'],
+  decorators: [
+    () => ({
+      template: `<div><div class="h-40 w-full max-w-screen-3xl mx-auto bg-gray-dark"><p class="text-white">Dark background for demo purposes only and not part of the component.</p></div><div id="storyDecorator"><story/></div><div class="h-40 w-full max-w-screen-3xl mx-auto bg-gray-dark"><p class="text-white">Dark background for demo purposes only and not part of the component.</p></div></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen'
+  },
+  argTypes: {
+    theme: {
+      type: { name: 'string', required: false },
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'stars']
+    }
+  }
+}
+
+// stories
+export const BaseStory = {
+  name: 'MetaPanel',
+  args: {
+    negativeTop: true,
+    negativeBottom: true,
+    button: 'View Standards',
+    primarySubject: 'Math',
+    additionalSubjects: ['Science'],
+    time: '30mins - hr',
+    gradeLevels: [
+      { gradeLevel: 'All Ages' },
+      { gradeLevel: 'K' },
+      { gradeLevel: '1' },
+      { gradeLevel: '2' },
+      { gradeLevel: '5' },
+      { gradeLevel: '6' },
+      { gradeLevel: '7' },
+      { gradeLevel: '8' }
+    ],
+    standards: [
+      {
+        standard: {
+          code: 'CCRA.R.1',
+          definition:
+            'Read closely to determine what the text says explicitly and to make logical inferences from it; cite specific textual evidence when writing or speaking to support conclusions drawn from the text.',
+          domain: {
+            domain: 'College and Career Readiness Anchor Standards for Reading'
+          },
+          type: 'ccss_english_language_arts'
+        }
+      },
+      {
+        standard: {
+          code: 'RL.3.2',
+          definition:
+            'Recount stories, including fables, folktales, and myths from diverse cultures; determine the central message, lesson, or moral and explain how it is conveyed through key details in the text.',
+          domain: {
+            domain: 'Reading Standards for Literature'
+          },
+          type: 'ccss_english_language_arts'
+        }
+      },
+      {
+        standard: {
+          code: 'RL.1.5',
+          definition:
+            'Explain major differences between books that tell stories and books that give information, drawing on a wide reading of a range of text types.',
+          domain: {
+            domain: 'Reading Standards for Literature'
+          },
+          type: 'ccss_english_language_arts'
+        }
+      },
+      {
+        standard: {
+          code: 'K.CC.A',
+          definition: 'Know number names and the count sequence.',
+          domain: {
+            domain: 'Counting and Cardinality'
+          },
+          type: 'ccss_maths'
+        }
+      },
+      {
+        standard: {
+          code: 'K.CC.A.3',
+          definition:
+            'Write numbers from 0 to 20. Represent a number of objects with a written numeral 0-20 (with 0 representing a count of no objects).',
+          domain: {
+            domain: 'Counting and Cardinality'
+          },
+          type: 'ccss_maths'
+        }
+      },
+      {
+        standard: {
+          code: 'K-PS2-1',
+          definition:
+            'Plan and conduct an investigation to compare the effects of different strengths or different directions of pushes and pulls on the motion of an object.',
+          domain: {
+            domain: 'Physical Sciences'
+          },
+          type: 'ngss'
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/vue/src/components/MetaPanel/MetaPanel.vue b/packages/vue/src/components/MetaPanel/MetaPanel.vue
new file mode 100644
index 00000000..04c79a5d
--- /dev/null
+++ b/packages/vue/src/components/MetaPanel/MetaPanel.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import {
+  MetaPanelTheme,
+  EduResourcesGradeLevel,
+  EduResourceStandardItem,
+  EduResourcesSubject,
+  EduResourcesTime
+} from './../../interfaces'
+import MetaPanelAccordion from './../MetaPanelAccordion/MetaPanelAccordion.vue'
+import MetaPanelItems from './../MetaPanelItems/MetaPanelItems.vue'
+import IconMinus from './../Icons/IconMinus.vue'
+import IconPlus from './../Icons/IconPlus.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+
+interface MetaPanelProps {
+  button?: string
+  theme?: MetaPanelTheme
+  primarySubject?: EduResourcesSubject
+  additionalSubjects?: EduResourcesSubject[]
+  gradeLevels?: EduResourcesGradeLevel[]
+  time?: EduResourcesTime
+  standards?: EduResourceStandardItem[]
+  negativeTop?: boolean
+  negativeBottom?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<MetaPanelProps>(), {
+  button: undefined,
+  theme: 'primary',
+  primarySubject: undefined,
+  additionalSubjects: undefined,
+  gradeLevels: undefined,
+  time: undefined,
+  standards: undefined,
+  negativeTop: false,
+  negativeBottom: false
+})
+const { button, theme, primarySubject, additionalSubjects, gradeLevels, time, standards } =
+  reactive(props)
+
+const metaPanelOpen = ref(false)
+
+const handleMetaPanel = () => {
+  metaPanelOpen.value = !metaPanelOpen.value
+}
+
+const buttonText = computed(() => {
+  let text = button
+  if (text) {
+    if (metaPanelOpen.value) {
+      text = text.replace('View', 'Hide')
+    }
+  }
+  return text
+})
+
+const backgroundClass = computed(() => {
+  let classes = 'bg-gray-light'
+  if (theme === 'stars') {
+    classes = 'bg-primary bg-stars bg-auto lg:bg-cover'
+  }
+  return classes
+})
+const headingClass = computed(() => {
+  let classes = 'text-primary'
+  if (theme === 'secondary') {
+    classes = 'text-secondary'
+  }
+  return classes
+})
+const borderClass = computed(() => {
+  let classes = 'border-t border-gray-light-mid'
+  if (theme === 'stars') {
+    classes = ''
+  }
+  return classes
+})
+
+interface SortedStandards {
+  [key: string]: EduResourceStandardItem[]
+}
+const sortedStandards = computed((): SortedStandards | undefined => {
+  if (standards) {
+    const sorted = standards.reduce<SortedStandards>((acc, item) => {
+      const type = item.standard.type
+      // Initialize array for type if it doesn't exist
+      if (!acc[type]) {
+        acc[type] = []
+      }
+      // Add item to the appropriate type array
+      acc[type].push(item)
+      return acc
+    }, {})
+    return sorted
+  }
+  return undefined
+})
+
+const standardsEla = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['ccss_english_language_arts'] : undefined
+})
+const standardsMath = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['ccss_math'] : undefined
+})
+const standardsNgss = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['ngss'] : undefined
+})
+const standardsIste = computed(() => {
+  return sortedStandards.value ? sortedStandards.value['iste'] : undefined
+})
+</script>
+
+<template>
+  <section
+    aria-label="Metadata"
+    class="MetaPanel z-20 relative overflow-hidden"
+    :class="{
+      '-mt-14': negativeTop,
+      '-mb-14': negativeBottom
+    }"
+  >
+    <div class="MixedBleedGrid pl-4 lg:pl-0">
+      <div
+        class="col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid"
+        :class="backgroundClass"
+      >
+        <div class="is-this-needed col-start-container lg:col-start-indent-col-2 col-end-container">
+          <div class="MetaPanel-heading lg:grid grid-cols-12 col-end-container container">
+            <div class="col-start-1 col-end-10 xl:col-end-9 pl-4 lg:pl-10 pr-2 py-6 lg:py-10">
+              <MetaPanelItems
+                :theme="theme"
+                :primary-subject="primarySubject"
+                :additional-subjects="additionalSubjects"
+                :grade-levels="gradeLevels"
+                :time="time"
+              />
+            </div>
+            <div
+              v-if="button"
+              class="ThemeVariantLight col-start-10 col-end-13 pl-4 pt-4 pb-6 lg:py-10 lg:text-right"
+            >
+              <BaseButton
+                variant="secondary"
+                class="MetaPanel-button"
+                :aria-expanded="metaPanelOpen"
+                compact
+                @click="handleMetaPanel"
+              >
+                {{ buttonText }}
+                <template #icon>
+                  <IconPlus
+                    v-if="!metaPanelOpen"
+                    class="text-xs ml-2"
+                  />
+                  <IconMinus
+                    v-else
+                    class="text-xs ml-2"
+                  />
+                </template>
+              </BaseButton>
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="standards"
+          v-show="metaPanelOpen"
+          class="MetaPanel-panel col-start-container lg:col-start-indent-col-2 col-end-bleed lg:grid grid-cols-subgrid bg-gray-light pb-3 lg:pb-6"
+        >
+          <div
+            class="container col-start-container lg:col-start-indent-col-2 col-end-container px-8 lg:px-[3rem] xl:px-[5.8rem]"
+          >
+            <div
+              class="pt-6 lg:pt-7"
+              :class="borderClass"
+            >
+              <div
+                class="text-subtitle mb-5"
+                :class="headingClass"
+              >
+                Standards
+                <span class="sr-only">.</span>
+              </div>
+              <div class="w-full lg:grid grid-cols-2 lg:gap-6 xl:gap-10">
+                <div v-if="standardsEla">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    English Language Arts Standards
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion
+                    :standards="standardsEla"
+                    class="mb-6"
+                  />
+                </div>
+                <div v-if="standardsMath">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    Common Core State Standards For Math
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion
+                    :standards="standardsMath"
+                    class="mb-6"
+                  />
+                </div>
+                <div v-if="standardsNgss">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    Next Generation Science Standards
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion
+                    :standards="standardsNgss"
+                    class="mb-6"
+                  />
+                </div>
+                <div v-if="standardsIste">
+                  <div class="text-base font-semibold text-gray-dark mb-4">
+                    Technology Standards (ISTE)
+                  </div>
+                  <span class="sr-only">.</span>
+                  <MetaPanelAccordion :standards="standardsIste" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+.MetaPanel {
+  .MetaPanel-button {
+    @apply border-[1px] font-primary normal-case tracking-normal font-bold text-lg py-2 bg-white;
+  }
+}
+</style>
diff --git a/packages/vue/src/components/MetaPanelAccordion/MetaPanelAccordion.vue b/packages/vue/src/components/MetaPanelAccordion/MetaPanelAccordion.vue
new file mode 100644
index 00000000..76c7e0be
--- /dev/null
+++ b/packages/vue/src/components/MetaPanelAccordion/MetaPanelAccordion.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import type { AccordionItemObject, EduResourceStandardItem } from './../../interfaces'
+import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
+
+interface MetaPanelAccordionProps {
+  standards?: EduResourceStandardItem[]
+}
+const props = withDefaults(defineProps<MetaPanelAccordionProps>(), {
+  standards: undefined
+})
+const { standards } = reactive(props)
+</script>
+
+<template>
+  <div class="MetaPanelAccordion">
+    <BaseAccordionItem
+      v-for="(item, index) in standards"
+      :key="index"
+      heading-level="h3"
+      class="mb-2 bg-white"
+      :item="item.standard as AccordionItemObject"
+    >
+      <template #heading>
+        <div class="w-full text-left pr-5">
+          <div class="text-sm tracking-normal text-action mb-0 can-hover:group-hover:underline">
+            {{ item.standard.domain?.domain }}
+          </div>
+          <div class="text-sm text-gray-mid-dark font-normal tracking-normal">
+            {{ item.standard.code }}
+          </div>
+        </div>
+      </template>
+      <template #panelContents>
+        <div class="pl-3 pb-3 pr-8 text-sm text-gray-dark">
+          <p>{{ item.standard.definition }}</p>
+        </div>
+      </template>
+    </BaseAccordionItem>
+  </div>
+</template>
+<style lang="scss">
+.MetaPanelAccordion {
+  .BaseAccordionItem {
+    .BaseAccordionHeader {
+      @apply bg-white;
+      > div {
+        @apply border-none;
+      }
+      button.BaseAccordion-trigger {
+        @apply py-2 px-3;
+        @apply can-hover:hover:no-underline;
+      }
+    }
+    &.-open {
+      .BaseAccordionHeader {
+        button.BaseAccordion-trigger {
+          @apply pb-0;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/MetaPanelItems/MetaPanelItems.stories.js b/packages/vue/src/components/MetaPanelItems/MetaPanelItems.stories.js
new file mode 100644
index 00000000..13b276c6
--- /dev/null
+++ b/packages/vue/src/components/MetaPanelItems/MetaPanelItems.stories.js
@@ -0,0 +1,27 @@
+import MetaPanelItems from './MetaPanelItems.vue'
+
+export default {
+  title: 'Components/Utilities/MetaPanelItems',
+  component: MetaPanelItems,
+  tags: ['!autodocs']
+}
+
+// stories
+export const BaseStory = {
+  name: 'MetaPanelItems',
+  args: {
+    primarySubject: { subject: 'Math' },
+    additionalSubjects: [{ subject: 'Science' }],
+    time: { time: '30mins - hr' },
+    gradeLevels: [
+      { gradeLevel: 'All Ages' },
+      { gradeLevel: 'K' },
+      { gradeLevel: '1' },
+      { gradeLevel: '2' },
+      { gradeLevel: '5' },
+      { gradeLevel: '6' },
+      { gradeLevel: '7' },
+      { gradeLevel: '8' }
+    ]
+  }
+}
diff --git a/packages/vue/src/components/MetaPanelItems/MetaPanelItems.vue b/packages/vue/src/components/MetaPanelItems/MetaPanelItems.vue
new file mode 100644
index 00000000..5130de9f
--- /dev/null
+++ b/packages/vue/src/components/MetaPanelItems/MetaPanelItems.vue
@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { rangeifyGrades } from './../../utils/rangeifyGrades'
+import {
+  MetaPanelTheme,
+  EduResourcesSubject,
+  EduResourcesGradeLevel,
+  EduResourcesTime
+} from './../../interfaces'
+import IconSubject from './../Icons/IconSubject.vue'
+import IconProfile from './../Icons/IconProfile.vue'
+import IconTime from './../Icons/IconTime.vue'
+
+interface MetaPanelProps {
+  theme?: MetaPanelTheme
+  primarySubject: EduResourcesSubject
+  additionalSubjects?: EduResourcesSubject[]
+  gradeLevels?: EduResourcesGradeLevel[]
+  time?: EduResourcesTime
+}
+
+// define props
+const props = withDefaults(defineProps<MetaPanelProps>(), {
+  theme: 'primary',
+  primarySubject: undefined,
+  additionalSubjects: undefined,
+  gradeLevels: undefined,
+  time: undefined
+})
+
+const { theme, primarySubject, additionalSubjects, gradeLevels, time } = reactive(props)
+
+const audience = computed(() => {
+  return gradeLevels ? rangeifyGrades(gradeLevels) : undefined
+})
+
+const subjects = computed(() => {
+  let combinedArray = [primarySubject.subject]
+  let output = undefined
+  if (additionalSubjects) {
+    const filteredArray = additionalSubjects.map((item) => item.subject)
+    combinedArray = combinedArray.concat(filteredArray)
+  }
+  output = combinedArray.join(', ')
+  return output
+})
+
+const iconColor = computed(() => {
+  let classes = 'text-primary'
+  if (theme === 'secondary') {
+    classes = 'text-secondary'
+  } else if (theme === 'stars') {
+    classes = 'text-white'
+  }
+  return classes
+})
+const headingColor = computed(() => {
+  let classes = 'text-primary'
+  if (theme === 'secondary') {
+    classes = 'text-secondary'
+  } else if (theme === 'stars') {
+    classes = 'text-white opacity-60'
+  }
+
+  return classes
+})
+const textColor = computed(() => {
+  let classes = 'text-gray-dark'
+  if (theme === 'stars') {
+    classes = 'text-white'
+  }
+  return classes
+})
+const themeVariant = computed(() => {
+  let variant = 'ThemeVariantGray'
+  if (theme === 'stars') {
+    variant = 'ThemeVariantDark'
+  }
+  return variant
+})
+</script>
+
+<template>
+  <div
+    class="MetaPanelItems md:flex gap-10"
+    :class="{ 'justify-between': subjects && audience && time }"
+  >
+    <div
+      v-if="subjects"
+      class="MetaPanelItem"
+    >
+      <div
+        class="MetaPanelItem-icon"
+        :class="iconColor"
+      >
+        <IconSubject class="text-[2em] md:text-[2.4em]" />
+      </div>
+      <div>
+        <div
+          class="MetaPanelItem-heading"
+          :class="`${themeVariant} ${headingColor}`"
+        >
+          Subjects
+          <span class="sr-only">.</span>
+        </div>
+        <div
+          class="MetaPanelItem-content"
+          :class="textColor"
+        >
+          {{ subjects }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="audience"
+      class="MetaPanelItem"
+    >
+      <div
+        class="MetaPanelItem-icon"
+        :class="iconColor"
+      >
+        <IconProfile class="text-[2.1em] md:text-[2.5em] mt-1 md:mt-0" />
+      </div>
+      <div>
+        <div
+          class="MetaPanelItem-heading"
+          :class="`${themeVariant} ${headingColor}`"
+        >
+          Grade Levels
+          <span class="sr-only">.</span>
+        </div>
+        <div
+          class="MetaPanelItem-content"
+          :class="textColor"
+        >
+          {{ audience }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-if="time?.time"
+      class="MetaPanelItem"
+    >
+      <div
+        class="MetaPanelItem-icon"
+        :class="iconColor"
+      >
+        <IconTime class="text-[1.6em] md:text-[2em] ml-1 mt-1" />
+      </div>
+      <div>
+        <div
+          class="MetaPanelItem-heading"
+          :class="`${themeVariant} ${headingColor}`"
+        >
+          Time Required
+          <span class="sr-only">.</span>
+        </div>
+        <div
+          class="MetaPanelItem-content"
+          :class="textColor"
+        >
+          {{ time.time }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.MetaPanelItems {
+  .MetaPanelItem {
+    @apply flex w-full items-start mb-4 md:mb-0 w-auto;
+    &:last-of-type {
+      @apply mb-0;
+    }
+    .MetaPanelItem-icon {
+      @apply mr-1 w-10 md:w-12;
+    }
+    .MetaPanelItem-heading {
+      @apply text-subtitle text-base md:mb-[.2em] whitespace-nowrap;
+    }
+    .MetaPanelItem-content {
+      @apply font-primary font-bold lg:text-xl;
+    }
+  }
+}
+</style>
diff --git a/packages/vue/src/components/MetadataEduResource/MetadataEduResource.stories.js b/packages/vue/src/components/MetadataEduResource/MetadataEduResource.stories.js
index 91f5d69a..1a1045a5 100644
--- a/packages/vue/src/components/MetadataEduResource/MetadataEduResource.stories.js
+++ b/packages/vue/src/components/MetadataEduResource/MetadataEduResource.stories.js
@@ -7,10 +7,8 @@ export default {
   argTypes: {
     variant: {
       type: { name: 'string', required: false },
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary']
-      }
+      control: { type: 'select' },
+      options: ['primary', 'secondary']
     }
   },
   excludeStories: /.*Data$/
diff --git a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
index efae2bad..b200c2ee 100644
--- a/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
+++ b/packages/vue/src/components/MixinCarousel/MixinCarousel.vue
@@ -113,7 +113,7 @@ const MixinCarouselOptions = swiperOptions.MixinCarousel
 Swiper.use([Navigation, A11y])
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
@@ -122,7 +122,7 @@ export const variants: Variants = {
 }
 
 interface Indents {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const indents: Indents = {
diff --git a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
index abb51dfc..20c490a9 100644
--- a/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
+++ b/packages/vue/src/components/NavJumpMenu/NavJumpMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <NavSecondary
     v-if="enabled"
-    id="JumpMenuTop"
+    id="NavJumpMenu"
     ref="NavJumpMenuRef"
     class="NavJumpMenu -hide-until-threshold"
     :invert="invert"
@@ -78,11 +78,11 @@ const theJumpLinks = computed(() => {
       return b.blockType === 'HeadingBlock' && b.level === props.headingLevel
     })
     // map to the correct data shape
-    const links: BreadcrumbPathObject[] = filteredBlocks.map((l) => {
+    const links: BreadcrumbPathObject[] = filteredBlocks.map((h) => {
       return {
         // @ts-expect-error using parameter that was added to BlockData
-        path: '#' + getHeadingId(l.heading, l.index),
-        title: l.heading
+        path: '#' + getHeadingId(h.heading, h.blockId),
+        title: h.heading
       } as BreadcrumbPathObject
     })
     return links
@@ -95,11 +95,11 @@ const theBreadcrumbs = computed(() => {
   const rootItem = props.title
     ? {
         title: props.title,
-        path: '#JumpMenuTop'
+        path: '#siteTop'
       }
     : {
         title: 'Back to top',
-        path: '#JumpMenuTop'
+        path: '#siteTop'
       }
   const jumpMenu: BreadcrumbPathObject = {
     title: 'Jump to…',
@@ -111,12 +111,14 @@ const theBreadcrumbs = computed(() => {
   }
   return breadcrumb as BreadcrumbPathObject[] | undefined
 })
+
 defineExpose({
   NavJumpMenuRef
 })
 onMounted(() => {
   mixinUpdateSecondary(theBreadcrumbs.value, true)
 })
+
 const route = useRoute()
 
 // repopulate the store with the jump links since the store is cleared on route changes
@@ -131,10 +133,10 @@ watch(
 <style lang="scss">
 .NavJumpMenu {
   &.-hide-until-threshold {
-    @apply opacity-0 h-0 transition-none overflow-visible;
+    @apply opacity-0 h-0 transition-none overflow-visible pointer-events-none;
     &.-is-sticky,
     &.-is-sticky-offset {
-      @apply opacity-100 transition-opacity;
+      @apply opacity-100 transition-all pointer-events-auto;
     }
   }
 }
diff --git a/packages/vue/src/components/NavSecondary/NavSecondary.vue b/packages/vue/src/components/NavSecondary/NavSecondary.vue
index e6d4b6d5..0e864166 100644
--- a/packages/vue/src/components/NavSecondary/NavSecondary.vue
+++ b/packages/vue/src/components/NavSecondary/NavSecondary.vue
@@ -81,9 +81,17 @@ export default defineComponent({
       default: false
     }
   },
-  data() {
+  data(): {
+    isSticky: boolean
+    stickyElement?: HTMLElement
+    observer?: IntersectionObserver
+    observerOffset?: IntersectionObserver
+  } {
     return {
-      isSticky: false
+      isSticky: false,
+      stickyElement: undefined,
+      observer: undefined,
+      observerOffset: undefined
     }
   },
   computed: {
@@ -119,6 +127,7 @@ export default defineComponent({
     ) {
       // intersection observer not supported
     } else if (this.enabled) {
+      this.initIntersectionObservers()
       this.checkSticky()
     }
   },
@@ -129,29 +138,31 @@ export default defineComponent({
       }
       return false
     },
-    checkSticky() {
-      const stickyElement = this.$refs.NavSecondary as HTMLElement
-      // we need both observers for when the global nav is/isn't showing
-      const observer = new IntersectionObserver(
+    initIntersectionObservers() {
+      this.stickyElement = this.$refs.NavSecondary as HTMLElement
+      this.observer = new IntersectionObserver(
         ([e]) => {
-          e.target.classList.toggle('-is-sticky', e.intersectionRatio < 1)
+          e.target.classList.toggle('-is-sticky', e.intersectionRatio === 0)
         },
         {
-          threshold: [1]
+          threshold: [0]
         }
       )
-      const observerOffset = new IntersectionObserver(
+      this.observerOffset = new IntersectionObserver(
         ([e]) => {
-          e.target.classList.toggle('-is-sticky-offset', e.intersectionRatio < 1)
+          e.target.classList.toggle('-is-sticky-offset', e.intersectionRatio === 0)
         },
         {
-          threshold: [1],
-          // would prefer to use rems but intersection observer only works with % or px
-          rootMargin: '-113px 0px 0px 0px'
+          threshold: [0],
+          rootMargin: this.themeStore.isEdu ? '-73px 0px 0px 0px' : '-113px 0px 0px 0px'
         }
       )
-      observer.observe(stickyElement)
-      observerOffset.observe(stickyElement)
+    },
+    checkSticky() {
+      if (this.stickyElement) {
+        if (this.observer) this.observer.observe(this.stickyElement)
+        if (this.observerOffset) this.observerOffset.observe(this.stickyElement)
+      }
     }
   }
 })
diff --git a/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue b/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue
index 33342280..c4e558b4 100644
--- a/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue
+++ b/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.vue
@@ -89,7 +89,7 @@ const buttonClass = computed(() => {
 })
 </script>
 <template>
-  <div class="ShareButtonsEdu relative flex flex-row items-start border-collapse print:hidden">
+  <div class="ShareButtonsEdu relative z-30 flex flex-row items-start border-collapse print:hidden">
     <BaseButton
       variant="social"
       :class="buttonClass"
diff --git a/packages/vue/src/interfaces.ts b/packages/vue/src/interfaces.ts
index 37a59175..6ad96893 100644
--- a/packages/vue/src/interfaces.ts
+++ b/packages/vue/src/interfaces.ts
@@ -15,6 +15,31 @@ export interface BlockData {
   level?: string
   items?: any[]
 }
+export interface StreamfieldBlockData extends BlockData {
+  blockId?: string
+  id?: string
+  fullBleed?: boolean
+  heading?: string
+  galleryTitle?: string
+  galleryDescription?: string
+  coverImage?: ImageObject
+  gallerySlides?: ImageObject[]
+  blocks?: object[]
+  value?: string
+  customLabel?: string
+  introduction?: string
+  teaserPage?: object | string[]
+  image?: ImageObject
+  buttonText?: string
+  fullWidthImage?: boolean
+  video?: any
+  embed?: any
+  displayCaption?: boolean
+  caption?: string
+  credit?: string
+  imageInline?: ImageObject
+}
+
 export interface ImageSrcObject {
   url: string
   width: number
@@ -125,17 +150,14 @@ export interface RelatedLinkObject extends LinkObject {
   document: { url: string } | null
   text: string | null
 }
-
-export interface PageResponseObject {
-  __typename: string
-  contentType: string
-  breadcrumb?: string
-  url?: string
+export interface BlockRelatedLinksObject extends BlockData {
+  heading: string
+  links: RelatedLinkObject[]
 }
 
 export interface PageResponse {
   __typename: string
-  page: PageResponseObject
+  page: PageObject
 }
 
 export interface HeaderResponse {
@@ -152,7 +174,7 @@ export interface FooterResponse {
 export type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu'
 
 export interface Attributes {
-  [name: string]: string
+  [key: string]: string
 }
 
 export interface AuthorObject {
@@ -177,3 +199,64 @@ export interface PillDictionaryInterface {
 export interface DictionaryInterface {
   [key: string]: string
 }
+export interface AccordionItemObject {
+  title?: string
+  body?: StreamfieldBlockData[]
+}
+
+export type MetaPanelTheme = 'primary' | 'secondary' | 'stars'
+
+export interface PageObject {
+  __typename: string
+  contentType: string
+  breadcrumb?: string
+  slug: string
+  url: string
+  title: string
+  getTopicsForDisplay?: Topic[]
+  label?: string
+  summary?: string
+  topper?: string
+  seoTitle?: string
+  searchDescription?: string
+  heroPosition?: 'full_bleed' | 'inline'
+  heroConstrain?: boolean
+  publicationDate?: string
+  body?: StreamfieldBlockData[]
+  thumbnailImage?: ThumbnailObject
+  relatedLinks?: BlockRelatedLinksObject[]
+  relatedContentHeading: string
+  relatedContent?: any
+}
+
+export interface EduResourcesSubject {
+  subject: string
+}
+export interface EduResourcesGradeLevel {
+  gradeLevel: string
+}
+
+export interface EduResourcesTime {
+  time: string
+}
+export interface EduResourceStandard {
+  type: string
+  code: string
+  domain: {
+    domain: string
+  }
+  definition: string
+}
+
+export interface EduResourceStandardItem {
+  standard: EduResourceStandard
+}
+
+export interface PageEduResourcesObject extends PageObject {
+  hero?: StreamfieldBlockData[]
+  primarySubject?: EduResourcesSubject
+  additionalSubjects?: EduResourcesSubject[]
+  gradeLevels?: EduResourcesGradeLevel[]
+  time?: EduResourcesTime
+  standards: EduResourceStandardItem[]
+}
diff --git a/packages/vue/src/main.ts b/packages/vue/src/main.ts
index 58d481ee..3a3e2dda 100644
--- a/packages/vue/src/main.ts
+++ b/packages/vue/src/main.ts
@@ -6,6 +6,7 @@ import filters from './utils/filters'
 // @ts-ignore
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
+import { BindOncePlugin } from 'vue-bind-once'
 import './assets/scss/styles-with-fonts.scss'
 import App from './App.vue'
 
@@ -23,6 +24,7 @@ app.use(pinia)
 app.use(router)
 app.use(vClickOutside)
 app.use(VueCompareImage)
+app.use(BindOncePlugin)
 
 // filters
 app.config.globalProperties.$filters = filters
diff --git a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js
index 9d8403e8..480bb3cc 100644
--- a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js
+++ b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.js
@@ -47,6 +47,7 @@ export const BaseStory = {
           blockType: 'HeroImageBlock'
         }
       ],
+      showJumpMenu: true,
       ...BlockStreamfieldTruncatedData,
       publicationDate: '2024-07-09',
       summary: 'Summary of resource article',
diff --git a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
index 105e6363..fbe10506 100644
--- a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
+++ b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
@@ -5,6 +5,7 @@ import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/Bas
 import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
 import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
 import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
@@ -12,6 +13,7 @@ import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsE
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 
 export default defineComponent({
   name: 'PageEduExplainerArticle',
@@ -27,7 +29,9 @@ export default defineComponent({
     BlockImageCarousel,
     BlockImageComparison,
     BlockLinkCarousel,
-    BlockRelatedLinks
+    BlockRelatedLinks,
+    BlockVideo,
+    NavJumpMenu
   },
   props: {
     data: {
@@ -121,6 +125,11 @@ export default defineComponent({
       />
     </LayoutHelper>
 
+    <NavJumpMenu
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="data.showJumpMenu"
+    />
     <!-- inline hero content -->
     <LayoutHelper
       v-if="!heroEmpty && heroInline"
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
new file mode 100644
index 00000000..98533a93
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
@@ -0,0 +1,303 @@
+import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories'
+import { BlockIframeEmbedData } from './../../../components/BlockIframeEmbed/BlockIframeEmbed.stories.js'
+import { BlockImageCarouselData } from './../../../components/BlockImageCarousel/BlockImageCarousel.stories'
+import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
+import { BlockHeadingData } from './../../../components/BlockHeading/BlockHeading.stories'
+import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
+import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories'
+import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
+import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import {
+  BlockStreamfieldTruncatedData,
+  BlockStreamfieldMinimalData
+} from './../../../components/BlockStreamfield/BlockStreamfield.stories'
+import PageEduLesson from './PageEduLesson.vue'
+
+export default {
+  title: 'Templates/EDU/PageEduLesson',
+  component: PageEduLesson,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
+    })
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BaseStory = {
+  args: {
+    data: {
+      __typename: 'EDULessonPage',
+      title: 'Test Lesson',
+      url: 'http://localhost:3000/edu/resources/test-lesson',
+      pageType: 'EDUExplainerArticlePage',
+      contentType: 'edu_resources.EDUExplainerArticlePage',
+      searchDescription: '',
+      seoTitle: 'Test Lesson',
+      slug: 'test-lesson',
+      publicationDate: '2024-08-16',
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        original: 'http://127.0.0.1:9000/media/original_images/imagessirtfsirtf-090303-16.jpg',
+        alt: ''
+      },
+      hero: [
+        {
+          ...HeroMediaData,
+          blockType: 'HeroImageBlock'
+        }
+      ],
+      heroConstrain: true,
+      heroPosition: 'full_bleed',
+
+      studentProject: {
+        title: 'Student Project',
+        urlPath: '/path-to-student-project'
+      },
+
+      primarySubject: {
+        subject: 'Arts'
+      },
+      additionalSubjects: [
+        {
+          subject: 'Science'
+        }
+      ],
+      gradeLevels: [
+        {
+          gradeLevel: 'K'
+        },
+        {
+          gradeLevel: '1'
+        }
+      ],
+      time: {
+        time: 'Under 30 mins'
+      },
+      standards: [
+        {
+          standard: {
+            code: 'CCRA.R.1',
+            definition:
+              'Read closely to determine what the text says explicitly and to make logical inferences from it; cite specific textual evidence when writing or speaking to support conclusions drawn from the text.',
+            domain: {
+              domain: 'College and Career Readiness Anchor Standards for Reading'
+            },
+            type: 'ccss_english_language_arts'
+          }
+        },
+        {
+          standard: {
+            code: 'RL.3.2',
+            definition:
+              'Recount stories, including fables, folktales, and myths from diverse cultures; determine the central message, lesson, or moral and explain how it is conveyed through key details in the text.',
+            domain: {
+              domain: 'Reading Standards for Literature'
+            },
+            type: 'ccss_english_language_arts'
+          }
+        },
+        {
+          standard: {
+            code: 'RL.1.5',
+            definition:
+              'Explain major differences between books that tell stories and books that give information, drawing on a wide reading of a range of text types.',
+            domain: {
+              domain: 'Reading Standards for Literature'
+            },
+            type: 'ccss_english_language_arts'
+          }
+        },
+        {
+          standard: {
+            code: 'K.CC.A',
+            definition: 'Know number names and the count sequence.',
+            domain: {
+              domain: 'Counting and Cardinality'
+            },
+            type: 'ccss_maths'
+          }
+        },
+        {
+          standard: {
+            code: 'K.CC.A.3',
+            definition:
+              'Write numbers from 0 to 20. Represent a number of objects with a written numeral 0-20 (with 0 representing a count of no objects).',
+            domain: {
+              domain: 'Counting and Cardinality'
+            },
+            type: 'ccss_maths'
+          }
+        },
+        {
+          standard: {
+            code: 'K-PS2-1',
+            definition:
+              'Plan and conduct an investigation to compare the effects of different strengths or different directions of pushes and pulls on the motion of an object.',
+            domain: {
+              domain: 'Physical Sciences'
+            },
+            type: 'ngss'
+          }
+        }
+      ],
+
+      overview: BlockStreamfieldMinimalData.body,
+      overviewHeading: 'Custom Overview heading',
+      overviewImage: BlockImageData.image,
+
+      materials:
+        '<ul><li data-block-key="nvq4l">list item one</li><li data-block-key="efmt7">list item two</li><li data-block-key="d0f66">list item three this one is really long and the text just keeps on going lorem ipsum dolor sit amet consectatur</li></ul><p data-block-key="bksrq">Paragraph to appear below.</p>',
+      materialsHeading: 'Materials stuff',
+      materialsImage: BlockImageData.image,
+
+      management: BlockStreamfieldMinimalData.body,
+      managementHeading: 'Management stuff',
+
+      background: BlockStreamfieldMinimalData.body,
+      backgroundHeading: 'Background heading',
+
+      procedures: [
+        {
+          procedure: {
+            blocks: BlockStreamfieldMinimalData.body
+          }
+        },
+        {
+          procedure: {
+            blocks: BlockStreamfieldMinimalData.body
+          }
+        },
+        {
+          procedure: {
+            blocks: BlockStreamfieldMinimalData.body
+          }
+        }
+      ],
+      proceduresHeading: 'Procedures heading',
+      proceduresStepsNumbering: true,
+
+      discussion: BlockStreamfieldMinimalData.body,
+      discussionHeading: 'Discussion heading',
+
+      assessment: BlockStreamfieldMinimalData.body,
+      assessmentHeading: 'Assessment heading',
+
+      extensions: BlockStreamfieldMinimalData.body,
+      extensionsHeading: 'Extensions heading',
+
+      techAddons: BlockStreamfieldMinimalData.body,
+      techAddonsHeading: 'Tech addons heading',
+
+      customSections: [
+        {
+          blockType: 'EDULessonCustomSectionBlock',
+          content: BlockStreamfieldTruncatedData.body,
+          heading: BlockHeadingData,
+          position: 'after_procedures'
+        }
+      ],
+
+      body: BlockStreamfieldTruncatedData.body,
+
+      relatedLinks: BlockRelatedLinksData.data,
+      relatedContentHeading: 'Related Content',
+      relatedContent: BlockLinkCardCarouselData
+    }
+  }
+}
+export const InlineHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline'
+    }
+  }
+}
+
+export const HeroCarousel = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
+    }
+  }
+}
+
+export const HeroImageComparison = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockImageComparisonData
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideo = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: [
+        {
+          blockType: 'VideoBlock',
+          video: BaseVideoData,
+          caption: 'Lorem ipsum dolor sit amet',
+          credit: 'NASA/JPL'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroVideoEmbed = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockVideoEmbedData.data,
+          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'
+        }
+      ]
+    }
+  }
+}
+
+export const HeroIframeEmbed = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      heroPosition: 'inline',
+      hero: [
+        {
+          ...BlockIframeEmbedData
+        }
+      ]
+    }
+  }
+}
+
+export const NoHero = {
+  args: {
+    data: {
+      ...BaseStory.args.data,
+      hero: []
+    }
+  }
+}
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
new file mode 100644
index 00000000..73934bf8
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
@@ -0,0 +1,410 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type {
+  BlockData,
+  ImageObject,
+  PageEduResourcesObject,
+  StreamfieldBlockData
+} from './../../../interfaces'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import BaseLink from './../../../components/BaseLink/BaseLink.vue'
+import BaseImagePlaceholder from './../../../components/BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import type { BlockHeadingObject } from '../../../components/BlockHeading/BlockHeading.vue'
+import BlockImageCarousel from './../../../components/BlockImageCarousel/BlockImageCarousel.vue'
+import BlockImageComparison from './../../../components/BlockImageComparison/BlockImageComparison.vue'
+import BlockLinkCarousel from './../../../components/BlockLinkCarousel/BlockLinkCarousel.vue'
+import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEmbed.vue'
+import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
+import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
+import PageEduLessonSection, { type PageEduLessonSectionProps } from './PageEduLessonSection.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
+import { HeadingLevel } from '../../../components/BaseHeading/BaseHeading.vue'
+
+interface EduLessonSectionObject extends PageEduLessonSectionProps {
+  type?: 'streamfield'
+}
+interface EduLessonProcedureBlocks {
+  blocks: StreamfieldBlockData[]
+}
+interface EduLessonProcedure {
+  procedure: EduLessonProcedureBlocks
+}
+
+interface PageEduLessonObject extends PageEduResourcesObject {
+  [key: string]: any
+  studentProject: {
+    title: string
+    urlPath: string
+  }
+  overview: StreamfieldBlockData[]
+  overviewHeading: string
+  overviewImage: ImageObject
+  materials: string
+  materialsHeading: string
+  materialsImage: ImageObject
+  management: StreamfieldBlockData[]
+  managementHeading: string
+  background: StreamfieldBlockData[]
+  backgroundHeading: string
+  procedures: EduLessonProcedure[]
+  proceduresHeading: string
+  proceduresStepsNumbering: boolean
+  discussion: StreamfieldBlockData[]
+  discussionHeading: string
+  assessment: StreamfieldBlockData[]
+  assessmentHeading: string
+  extensions: StreamfieldBlockData[]
+  extensionsHeading: string
+  techAddons: StreamfieldBlockData[]
+  techAddonsHeading: string
+  customSections: any
+}
+interface PageEduLessonProps {
+  data?: PageEduLessonObject
+}
+
+const props = withDefaults(defineProps<PageEduLessonProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+
+const PageEduLessonJumpMenu = ref()
+
+defineExpose({
+  PageEduLessonJumpMenu
+})
+
+const stringAsHeadingBlockData = (
+  heading: HeadingLevel,
+  overrideText?: string
+): BlockHeadingObject => {
+  return {
+    blockType: 'HeadingBlock',
+    heading: (overrideText || heading) as HeadingLevel,
+    level: 'h2'
+  }
+}
+
+const heroEmpty = computed((): boolean => {
+  return !data?.hero?.length
+})
+
+const heroInline = computed((): boolean => {
+  if (!heroEmpty.value && data?.hero) {
+    if (data?.hero[0].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'
+    ) {
+      return true
+    }
+  }
+  return false
+})
+
+const computedClass = computed((): string => {
+  if (heroInline.value || heroEmpty) {
+    return 'pt-5 lg:pt-12'
+  } else if (!heroInline.value) {
+    return '-nav-offset'
+  }
+  return ''
+})
+
+const sectionOrder = [
+  'top',
+  'overview',
+  'materials',
+  'management',
+  'background',
+  'procedures',
+  'discussion',
+  'assessment',
+  'extensions',
+  'techAddons',
+  'bottom'
+]
+
+// mimic HeadingBlock data shape for defined section headings
+const staticSectionHeadings = computed((): { [key: string]: BlockHeadingObject } | undefined => {
+  if (data) {
+    const result = sectionOrder.reduce<Record<string, BlockHeadingObject>>((acc, section) => {
+      const headingText =
+        section === 'techAddons'
+          ? 'Tech Add-ons'
+          : section.charAt(0).toUpperCase() + section.slice(1)
+      acc[section] = stringAsHeadingBlockData(
+        (data[`${section}Heading`] as HeadingLevel) || headingText
+      )
+      return acc
+    }, {})
+    return result
+  }
+  return undefined
+})
+
+const keyedCustomSections = computed(
+  ():
+    | {
+        [key: string]: StreamfieldBlockData[]
+      }
+    | undefined => {
+    if (data) {
+      const result = data.customSections.reduce(
+        (
+          acc: { [key: string]: StreamfieldBlockData[] },
+          section: {
+            heading: StreamfieldBlockData
+            content: StreamfieldBlockData[]
+            position: string
+          }
+        ) => {
+          const position = section.position
+          if (!acc[position]) {
+            acc[position] = []
+          }
+          acc[position].push(section.heading)
+          acc[position].push(...section.content)
+          return acc
+        },
+        {}
+      )
+      return result
+    }
+    return undefined
+  }
+)
+
+const consolidatedBlocks = computed(() => {
+  // NavJumpMenu handles filtering for HeadingBlock, so we don't need to do that here
+  const blocks = []
+  // include custom top blocks
+  if (keyedCustomSections.value && keyedCustomSections.value['top']) {
+    blocks.push(...keyedCustomSections.value['top'])
+  }
+  // include predefined section blocks
+  sectionOrder.forEach((section) => {
+    if (data && data[section]) {
+      if (staticSectionHeadings.value && staticSectionHeadings.value[section]) {
+        blocks.push(staticSectionHeadings.value[section])
+      }
+      if (section !== 'materials' && section !== 'procedures') {
+        blocks.push(...data[section])
+      } else if (section === 'procedures' && data.procedures?.length) {
+        // get blocks in nested procedures
+        data.procedures.forEach((item) => {
+          if (item.procedure?.blocks?.length) {
+            blocks.push(...item.procedure.blocks)
+          }
+        })
+      }
+    }
+    // include custom "after_" blocks
+    if (keyedCustomSections.value && keyedCustomSections.value[`after_${section}`]) {
+      blocks.push(...keyedCustomSections.value[`after_${section}`])
+    }
+  })
+  // include custom bottom blocks
+  if (keyedCustomSections.value && keyedCustomSections.value['bottom']) {
+    blocks.push(...keyedCustomSections.value['bottom'])
+  }
+  // include body blocks
+  if (data?.body?.length) {
+    blocks.push(...data.body)
+  }
+
+  return blocks
+})
+
+// organize data to render with PageEduLessonSection component
+const consolidatedSections = computed((): EduLessonSectionObject[] => {
+  const sections = []
+  // include custom top section
+  if (keyedCustomSections.value && keyedCustomSections.value['top']) {
+    sections.push({ type: 'streamfield', blocks: keyedCustomSections.value['top'] })
+  }
+  sectionOrder.forEach((section) => {
+    if (data && data[section]) {
+      sections.push({
+        heading: staticSectionHeadings.value
+          ? (staticSectionHeadings.value[section] as BlockData)
+          : undefined,
+        blocks: section !== 'materials' && section !== 'procedures' ? data[section] : undefined,
+        text: section === 'materials' ? data[section] : undefined,
+        procedures: section === 'procedures' ? data[section] : undefined,
+        procedureSteps: section === 'procedures' ? data.proceduresStepsNumbering : false
+      })
+    }
+    // include custom "after_" sections
+    if (keyedCustomSections.value && keyedCustomSections.value[`after_${section}`]) {
+      sections.push({ type: 'streamfield', blocks: keyedCustomSections.value[`after_${section}`] })
+    }
+  })
+  // include custom bottom section
+  if (keyedCustomSections.value && keyedCustomSections.value['bottom']) {
+    sections.push({ type: 'streamfield', blocks: keyedCustomSections.value['bottom'] })
+  }
+  return sections as EduLessonSectionObject[]
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="ThemeVariantLight"
+    :class="computedClass"
+  >
+    <LayoutHelper
+      indent="col-3"
+      class="mb-10"
+    >
+      <DetailHeadline
+        :title="data.title"
+        label="Lesson"
+        pill
+      />
+      <ShareButtonsEdu
+        v-if="data?.url"
+        class="mt-4"
+        :url="data.url"
+        :title="data.title"
+        :image="data.thumbnailImage?.original"
+      />
+      <p
+        v-if="data.studentProject"
+        class="mt-8 font-bold text-body-lg"
+      >
+        Find out what’s involved for students:
+        <BaseLink
+          class="font-normal inline text-action underline hover:text-action-dark cursor-pointer"
+          variant="none"
+          :to="data.studentProject.urlPath"
+        >
+          View the Project Steps
+        </BaseLink>
+      </p>
+    </LayoutHelper>
+    <MetaPanel
+      button="View Standards"
+      theme="stars"
+      :primary-subject="data.primarySubject"
+      :additional-subjects="data.additionalSubjects"
+      :time="data.time"
+      :grade-levels="data.gradeLevels"
+      :standards="data.standards"
+      negative-bottom
+    />
+
+    <!-- hero media -->
+    <HeroMedia
+      v-if="
+        !heroEmpty &&
+        !heroInline &&
+        data?.hero?.length &&
+        (data.hero[0].blockType === 'HeroImageBlock' || data.hero[0].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"
+      :constrain="data.heroConstrain"
+    />
+
+    <!-- TODO: put this in a component (exclude layout though) -->
+    <LayoutHelper
+      v-if="!heroEmpty && heroInline && data.hero?.length"
+      class="lg:mb-22 mb-10"
+    >
+      <BlockImageStandard
+        v-if="data.hero[0].blockType === 'HeroImageBlock'"
+        :data="data.hero[0].imageInline"
+        :display-caption="data.hero[0].displayCaption"
+        :caption="data.hero[0].caption"
+        :constrain="data.heroConstrain"
+      />
+      <BlockImageCarousel
+        v-else-if="data.hero[0].blockType === 'CarouselBlock'"
+        :items="data.hero[0].blocks"
+        :block-id="data.hero[0].id"
+      />
+      <BlockIframeEmbed
+        v-else-if="data.hero[0].blockType === 'IframeEmbedBlock'"
+        :data="data.hero[0]"
+      />
+      <BlockVideo
+        v-else-if="data.hero[0].blockType === 'VideoBlock'"
+        :data="data.hero[0]"
+        autoplay
+      />
+      <BaseImagePlaceholder
+        v-else-if="data.hero[0].blockType === 'VideoEmbedBlock'"
+        aspect-ratio="16:9"
+        dark-mode
+      >
+        <div v-html="data.hero[0].embed?.embed"></div>
+      </BaseImagePlaceholder>
+      <BlockImageComparison
+        v-else-if="data.hero[0].blockType === 'ImageComparisonBlock'"
+        :data="data.hero[0]"
+      />
+    </LayoutHelper>
+
+    <NavJumpMenu
+      ref="PageEduLessonJumpMenu"
+      :title="data.title"
+      :blocks="consolidatedBlocks"
+      :enabled="true"
+    />
+    <div id="NavJumpMenuFrame">
+      <template
+        v-for="(value, _key) in consolidatedSections"
+        :key="_key"
+      >
+        <BlockStreamfield
+          v-if="value.type === 'streamfield'"
+          :data="value.blocks"
+        />
+        <PageEduLessonSection
+          v-else
+          :heading="value.heading"
+          :blocks="value.blocks"
+          :procedures="value.procedures"
+          :procedure-steps="value.procedureSteps"
+          :text="value.text"
+          :image="value.image"
+        />
+      </template>
+
+      <!-- streamfield blocks -->
+      <BlockStreamfield :data="data.body" />
+
+      <!-- related links -->
+      <LayoutHelper
+        v-if="data.relatedLinks && data.relatedLinks.length"
+        indent="col-3"
+        class="lg:my-18 my-10"
+      >
+        <BlockRelatedLinks :data="data.relatedLinks[0]" />
+      </LayoutHelper>
+
+      <!-- related content -->
+      <BlockLinkCarousel
+        item-type="cards"
+        class="lg:my-24 my-12 print:px-4"
+        :heading="data.relatedContentHeading"
+        :items="data.relatedContent"
+      />
+    </div>
+  </div>
+</template>
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue b/packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue
new file mode 100644
index 00000000..f16a09f2
--- /dev/null
+++ b/packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import { camelCase } from 'lodash'
+import type { ImageObject, StreamfieldBlockData } from './../../../interfaces'
+import BlockHeading, {
+  type BlockHeadingObject
+} from './../../../components/BlockHeading/BlockHeading.vue'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+
+export interface PageEduLessonSectionProps {
+  heading: BlockHeadingObject
+  blocks?: StreamfieldBlockData[]
+  procedures?: {
+    procedure: {
+      blocks: StreamfieldBlockData[]
+    }
+  }[]
+  procedureSteps?: boolean
+  text?: string
+  image?: ImageObject
+}
+
+const props = withDefaults(defineProps<PageEduLessonSectionProps>(), {
+  heading: undefined,
+  blocks: undefined,
+  procedures: undefined,
+  procedureSteps: false,
+  text: undefined,
+  image: undefined
+})
+
+const { heading, blocks, image } = reactive(props)
+
+const anchorId = computed(() => {
+  return 'lesson_' + camelCase(heading.heading)
+})
+</script>
+<template>
+  <section
+    :id="anchorId"
+    :aria-label="heading.heading"
+  >
+    <LayoutHelper
+      indent="col-3"
+      class="lg:mb-8 mb-5"
+    >
+      <BlockHeading
+        :data="heading"
+        generate-id
+      />
+    </LayoutHelper>
+
+    <LayoutHelper
+      v-if="image"
+      indent="col-2"
+      class="lg:mb-8 mb-5"
+    >
+      <!-- image goes here -->
+      <BlockImageStandard :data="image" />
+    </LayoutHelper>
+
+    <BlockStreamfield
+      v-if="blocks"
+      :data="blocks"
+    />
+    <template v-else-if="procedures?.length">
+      <template
+        v-for="(item, index) in procedures"
+        :key="index"
+      >
+        <LayoutHelper
+          v-if="procedureSteps"
+          indent="col-3"
+          class="lg:mb-8 mb-5"
+        >
+          <BaseHeading level="h3">
+            {{ 'Section ' + (Number(index) + 1) }}
+          </BaseHeading>
+        </LayoutHelper>
+        <BlockStreamfield
+          v-if="item?.procedure?.blocks"
+          :data="item.procedure.blocks"
+        />
+      </template>
+    </template>
+    <LayoutHelper
+      v-else-if="text"
+      indent="col-3"
+      class="lg:mb-18 mb-10"
+    >
+      <BlockText :text="text" />
+    </LayoutHelper>
+  </section>
+</template>
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
index 2cc74371..985400c5 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.stories.js
@@ -56,6 +56,7 @@ export const BaseStory = {
       heroPosition: 'full_bleed',
       heroImage: HeroMediaData.image,
       heroImageInline: HeroMediaData.imageInline,
+      showJumpMenu: true,
       ...BlockStreamfieldData
     }
   }
diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
index 5d69bccc..3d36015a 100644
--- a/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
+++ b/packages/vue/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue
@@ -1,15 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, defineExpose } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
-import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import type {
-  AuthorObject,
-  ImageObject,
-  PageResponseObject,
-  RelatedLinkObject,
-  Topic,
-  ThumbnailObject
-} from './../../../interfaces'
+import type { AuthorObject, ImageObject, PageObject } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
@@ -19,23 +11,14 @@ import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 
-interface PageEduNewsDetailObject extends PageResponseObject {
+interface PageEduNewsDetailObject extends PageObject {
   readTime: string
   url: string
   heroImage: ImageObject
   heroImageInline: ImageObject
-  thumbnailImage: ThumbnailObject
-  heroPosition: string
   heroConstrain: boolean
   heroImageCaption: string
   authors: AuthorObject[]
-  publicationDate: string
-  title: string
-  getTopicsForDisplay: Topic[]
-  summary: string
-  topper: string
-  relatedLinks: RelatedLinkObject[]
-  body: StreamfieldBlockData[]
   showJumpMenu: boolean
 }
 
@@ -69,7 +52,7 @@ const computedClass = computed(() => {
 })
 
 const dateTimeArray = computed(() => {
-  return props.data.publicationDate.split(' ')
+  return props.data.publicationDate ? props.data.publicationDate.split(' ') : undefined
 })
 
 defineExpose({
@@ -88,7 +71,7 @@ defineExpose({
       ref="PageEduNewsDetailJumpMenu"
       :title="data.title"
       :blocks="data.body"
-      :enabled="true"
+      :enabled="data.showJumpMenu"
     />
 
     <!-- schema.org -->
diff --git a/packages/vue/src/utils/getHeadingId.ts b/packages/vue/src/utils/getHeadingId.ts
index d9a6f8bb..f34f940b 100644
--- a/packages/vue/src/utils/getHeadingId.ts
+++ b/packages/vue/src/utils/getHeadingId.ts
@@ -1,5 +1,5 @@
 import { camelCase } from 'lodash'
-
-export const getHeadingId = (heading: string, index?: number) => {
-  return camelCase(heading + (index ? index : ''))
+import { type HeadingLevel } from '../components/BaseHeading/BaseHeading.vue'
+export const getHeadingId = (heading: HeadingLevel, blockId?: string) => {
+  return 'anchor_' + camelCase(heading) + (blockId ? '_' + camelCase(blockId) : '')
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d018beb8..30d342d3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -168,6 +168,9 @@ importers:
       vue:
         specifier: ^3.2.47
         version: 3.4.27(typescript@5.4.5)
+      vue-bind-once:
+        specifier: ^0.2.1
+        version: 0.2.1(vue@3.4.27(typescript@5.4.5))
       vue3-compare-image:
         specifier: ^1.2.5
         version: 1.2.5(vue@3.4.27(typescript@5.4.5))
@@ -533,6 +536,9 @@ importers:
       vue:
         specifier: ^3.4.21
         version: 3.4.27(typescript@5.4.5)
+      vue-bind-once:
+        specifier: ^0.2.1
+        version: 0.2.1(vue@3.4.27(typescript@5.4.5))
       vue-observe-visibility:
         specifier: ^1.0.0
         version: 1.0.0
@@ -8939,6 +8945,11 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-bind-once@0.2.1:
+    resolution: {integrity: sha512-17toDsxK7hc8folglp6TYtybi/Q0FVJal6plFeMeofWd2nOl4axHg9ckR/5ORNCj+GyjMAWh/OD10MvT6AXbHA==}
+    peerDependencies:
+      vue: ^3
+
   vue-bundle-renderer@2.1.0:
     resolution: {integrity: sha512-uZ+5ZJdZ/b43gMblWtcpikY6spJd0nERaM/1RtgioXNfWFbjKlUwrS8HlrddN6T2xtptmOouWclxLUkpgcVX3Q==}
 
@@ -19727,6 +19738,11 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-bind-once@0.2.1(vue@3.4.27(typescript@5.4.5)):
+    dependencies:
+      scule: 1.3.0
+      vue: 3.4.27(typescript@5.4.5)
+
   vue-bundle-renderer@2.1.0:
     dependencies:
       ufo: 1.5.3