diff --git a/packages/vue-component-library/package.json b/packages/vue-component-library/package.json
index 33c413781..342ac3a6b 100644
--- a/packages/vue-component-library/package.json
+++ b/packages/vue-component-library/package.json
@@ -107,4 +107,4 @@
   "engines": {
     "pnpm": "^9.12.1"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue-component-library/src/lib-components/EffectSlideToggle.vue b/packages/vue-component-library/src/lib-components/EffectSlideToggle.vue
new file mode 100644
index 000000000..c619b63a4
--- /dev/null
+++ b/packages/vue-component-library/src/lib-components/EffectSlideToggle.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+export interface Props {
+  duration?: number
+  easing?: string
+  opened?: boolean
+  preventClose?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  duration: 400,
+  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  opened: false,
+  preventClose: false
+})
+
+const emit = defineEmits<{
+  opening: []
+  opened: []
+  closing: []
+  closed: []
+}>()
+
+const isOpened = ref<boolean>(props.opened)
+const isClosing = ref<boolean>(false)
+const isExpanding = ref<boolean>(false)
+const animation = ref<Animation | null>(null)
+const height = ref<string>('auto')
+const detailsRef = ref<HTMLDetailsElement | null>(null)
+const summaryRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+
+const classes = computed(() => [
+  'effect-slide-toggle',
+  { 'is-opened': isOpened.value },
+  { 'is-closed': !isOpened.value },
+  { 'is-closing': isClosing.value },
+  { 'is-opening': isExpanding.value }
+])
+
+watch(() => props.opened, (newVal: boolean) => {
+  if (newVal)
+    open()
+
+  else
+    close()
+})
+
+function onClick(): void {
+  if (isClosing.value || !isOpened.value) {
+    open()
+  }
+  else if (isExpanding.value || isOpened.value) {
+    if (!props.preventClose)
+      close()
+  }
+}
+
+function close(): void {
+  if (!detailsRef.value || !summaryRef.value)
+    return
+
+  isClosing.value = true
+  emit('closing')
+
+  const startHeight = `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${summaryRef.value.offsetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeight, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => onAnimationFinish(false)
+  animation.value.oncancel = () => (isClosing.value = false)
+}
+
+async function open(): Promise<void> {
+  if (!detailsRef.value)
+    return
+
+  height.value = `${detailsRef.value.offsetHeight}px`
+  isOpened.value = true
+  emit('opening')
+
+  await nextTick()
+  expand()
+}
+
+function expand(): void {
+  if (!detailsRef.value || !summaryRef.value || !contentRef.value)
+    return
+
+  isExpanding.value = true
+  const startHeight = `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${summaryRef.value.offsetHeight + contentRef.value.offsetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeight, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => onAnimationFinish(true)
+  animation.value.oncancel = () => (isExpanding.value = false)
+}
+
+function onAnimationFinish(open: boolean): void {
+  isOpened.value = open
+  animation.value = null
+  isClosing.value = false
+  isExpanding.value = false
+  height.value = 'auto'
+  if (open)
+    emit('opened')
+  else
+    emit('closed')
+}
+
+// Animate to a specific height (useful for content changes)
+function animateToHeight(targetHeight: number, startHeight?: number): void {
+  if (!detailsRef.value || !summaryRef.value)
+    return
+
+  const startHeightPx = startHeight ? `${startHeight}px` : `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${targetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeightPx, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => {
+    height.value = endHeight
+    animation.value = null
+  }
+  animation.value.oncancel = () => {
+    animation.value = null
+  }
+}
+
+// Expose methods for parent components
+defineExpose({
+  open,
+  close,
+  animateToHeight,
+  isOpened: computed(() => isOpened.value)
+})
+</script>
+
+<template>
+  <details
+    ref="detailsRef"
+    :class="classes"
+    :open="isOpened"
+  >
+    <summary
+      ref="summaryRef"
+      class="summary"
+      @click.prevent="onClick"
+    >
+      <slot name="summary" />
+    </summary>
+    <div
+      ref="contentRef"
+      class="content"
+    >
+      <slot />
+    </div>
+  </details>
+</template>
+
+<style scoped>
+.effect-slide-toggle {
+  overflow: hidden;
+  height: v-bind('height');
+
+  .summary {
+    display: block;
+    cursor: pointer;
+    user-select: none;
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/packages/vue-component-library/src/lib-components/ExcerptPod.vue b/packages/vue-component-library/src/lib-components/ExcerptPod.vue
new file mode 100644
index 000000000..1134e0442
--- /dev/null
+++ b/packages/vue-component-library/src/lib-components/ExcerptPod.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+// Imports
+import { computed, defineProps, ref } from 'vue'
+import SvgArrowDown from 'ucla-library-design-tokens/assets/svgs/icon-caret-down.svg'
+import { useTheme } from '@/composables/useTheme'
+import EffectSlideToggle from '@/lib-components/EffectSlideToggle.vue'
+
+// Props
+interface ExcerptPodProps {
+  title: string
+  subtitle: string
+  text: string
+  labelOpen: string
+  labelClose: string
+  sentenceSplitCount: number
+}
+const props = withDefaults(defineProps<ExcerptPodProps>(), {
+  title: '',
+  subtitle: '',
+  text: '',
+  labelOpen: '',
+  labelClose: '',
+  sentenceSplitCount: 2,
+})
+
+const theme = useTheme()
+
+// Data
+const isOpen = ref(false)
+
+// Computed
+const classes = computed(() => [
+  'excerpt-pod',
+  theme?.value || '',
+  { 'is-open': isOpen.value },
+])
+
+const dynamicLabel = computed(() =>
+  isOpen.value ? props.labelOpen : props.labelClose
+)
+
+// Split text into first two sentences and the rest
+const textParts = computed(() => {
+  if (!props.text)
+    return { truncatedText: '', remainingText: '', hasMore: false }
+
+  // Simple sentence splitting - splits on period followed by space and capital letter
+  const sentenceRegex = /\.\s+(?=[A-Z])/g
+  const sentences = props.text.split(sentenceRegex)
+
+  if (sentences.length <= props.sentenceSplitCount) {
+    return {
+      truncatedText: props.text,
+      remainingText: '',
+      hasMore: false
+    }
+  }
+
+  // First X sentences
+  let truncatedText = sentences.slice(0, props.sentenceSplitCount).join('. ')
+
+  // Add period if not present
+  if (!truncatedText.endsWith('.'))
+    truncatedText += '.'
+
+  // Remaining text - rejoin with periods
+  const remainingText = ` ${sentences.slice(props.sentenceSplitCount).join('.')}`
+
+  return {
+    truncatedText,
+    remainingText,
+    hasMore: true,
+  }
+})
+
+// Methods
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div :class="classes">
+    <!-- Title -->
+    <h5
+      class="title"
+      v-html="title"
+    />
+    <!-- Info -->
+    <div class="info">
+      <h6
+        class="subtitle"
+        v-html="subtitle"
+      />
+      <div class="text-excerpt">
+        <EffectSlideToggle
+          :opened="isOpen"
+          @click.stop="toggle"
+        >
+          <!-- summary -->
+          <template #summary>
+            <div class="summary-content">
+              <span v-html="textParts.truncatedText" />
+            </div>
+          </template>
+          <!-- content -->
+          <div v-html="textParts.remainingText" />
+        </EffectSlideToggle>
+        <button
+          v-if="textParts.hasMore"
+          class="btn"
+          :aria-expanded="isOpen"
+          @click.stop="toggle"
+        >
+          <transition
+            name="fade-label"
+            mode="out-in"
+          >
+            <span
+              :key="dynamicLabel"
+              class="label"
+              v-html="dynamicLabel"
+            />
+          </transition>
+          <SvgArrowDown class="caret-icon" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_excerpt-pod.scss";
+</style>
diff --git a/packages/vue-component-library/src/stories/ExcerptPod.spec.js b/packages/vue-component-library/src/stories/ExcerptPod.spec.js
new file mode 100644
index 000000000..acc284149
--- /dev/null
+++ b/packages/vue-component-library/src/stories/ExcerptPod.spec.js
@@ -0,0 +1,20 @@
+describe('Funkhaus / ExcerptPod', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-excerptpod--default&args=&viewMode=story'
+    )
+    cy.get('.excerpt-pod').should('exist')
+    cy.get('.excerpt-pod .title').should('exist')
+    cy.get('.excerpt-pod .subtitle').should('exist')
+    cy.get('.excerpt-pod .text').should('exist')
+    cy.percySnapshot('Funkhaus / ExcerptPod: Default')
+  })
+
+  it('Renders NotesAccordion when accordions are present', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-excerptpod--more-sections&args=&viewMode=story'
+    )
+    cy.get('.excerpt-pod .notes-accordion').should('exist')
+    cy.get('.notes-accordion .btn').should('exist')
+  })
+})
diff --git a/packages/vue-component-library/src/stories/ExcerptPod.stories.js b/packages/vue-component-library/src/stories/ExcerptPod.stories.js
new file mode 100644
index 000000000..35985bed7
--- /dev/null
+++ b/packages/vue-component-library/src/stories/ExcerptPod.stories.js
@@ -0,0 +1,65 @@
+import { computed } from 'vue'
+import ExcerptPod from '@/lib-components/ExcerptPod.vue'
+
+export default {
+  title: 'Funkhaus / ExcerptPod',
+  component: ExcerptPod,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Accordion title (HTML allowed)',
+    },
+    text: {
+      control: 'text',
+      description: 'Accordion content (HTML allowed)',
+    },
+    labelOpen: { control: 'text', description: 'Label when open' },
+    labelClose: { control: 'text', description: 'Label when closed' },
+  },
+}
+
+function Template(args) {
+  return {
+    components: { ExcerptPod },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+    <ExcerptPod
+        :title="args.title"
+        :text="args.text"
+        :subtitle="args.subtitle"
+        :labelOpen="args.labelOpen"
+        :labelClose="args.labelClose"
+        :sentenceSplitCount="args.sentenceSplitCount"
+    />
+  `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  title: 'Notes',
+  subtitle: 'Subtitle goes hereeee',
+  text: 'This digital collection is comprised of selected digitized photographic negatives from the analog photographic archive. Digitization and description of this collection is ongoing. The analog collection consists of photonegatives documenting events and people in Southern California and photographic prints documenting events and people in Southern California, the U.S., and the world. The material originates from the Los Angeles Times newspaper and includes glass negatives (ca. 1918-1932), nitrate negatives (ca. 1925-45), and safety negatives (ca. 1935-present). Also includes prints and negatives from the Los Angeles Times Orange County and San Diego bureaus.',
+  labelOpen: 'Show Less',
+  labelClose: 'Show More',
+  sentenceSplitCount: 1,
+}
+export const EmptyProps = Template.bind({})
+EmptyProps.args = {
+  ...Default.args,
+}
+
+export const MoreSections = Template.bind({})
+MoreSections.args = {
+  ...Default.args,
+  sentenceSplitCount: 1,
+  labelOpen: 'Collapse',
+  labelClose: 'Expand',
+}
diff --git a/packages/vue-component-library/src/stories/FooterMain.stories.js b/packages/vue-component-library/src/stories/FooterMain.stories.js
index a214038c2..472bb7248 100644
--- a/packages/vue-component-library/src/stories/FooterMain.stories.js
+++ b/packages/vue-component-library/src/stories/FooterMain.stories.js
@@ -10,39 +10,39 @@ export default {
 const mockFTVAFooterPrimary = {
   socialItems: [
     {
-      id: "4343807",
-      name: "Facebook",
-      to: "https://www.facebook.com/UCLAFTVArchive/",
+      id: '4343807',
+      name: 'Facebook',
+      to: 'https://www.facebook.com/UCLAFTVArchive/',
       classes: null,
-      target: "1"
+      target: '1'
     },
     {
-      id: "4343808",
-      name: "Instagram",
-      to: "https://www.instagram.com/uclaftvarchive/",
+      id: '4343808',
+      name: 'Instagram',
+      to: 'https://www.instagram.com/uclaftvarchive/',
       classes: null,
-      target: "1"
+      target: '1'
     },
     {
-      id: "4343809",
-      name: "Bluesky",
-      to: "https://bsky.app/profile/uclaftvarchive.bsky.social",
+      id: '4343809',
+      name: 'Bluesky',
+      to: 'https://bsky.app/profile/uclaftvarchive.bsky.social',
       classes: null,
-      target: "1"
+      target: '1'
     },
     {
-      id: "4343810",
-      name: "YouTube",
-      to: "https://www.youtube.com/channel/UCKwx-Ugwnha7SvfyiHBV9iQ",
-      classes: "",
-      target: "1"
+      id: '4343810',
+      name: 'YouTube',
+      to: 'https://www.youtube.com/channel/UCKwx-Ugwnha7SvfyiHBV9iQ',
+      classes: '',
+      target: '1'
     },
     {
-      id: "4343811",
-      name: "Letterboxd",
-      to: "https://letterboxd.com/uclaftvarchive/",
+      id: '4343811',
+      name: 'Letterboxd',
+      to: 'https://letterboxd.com/uclaftvarchive/',
       classes: null,
-      target: "1"
+      target: '1'
     },
   ],
 
diff --git a/packages/vue-component-library/src/stories/FooterPrimary.stories.js b/packages/vue-component-library/src/stories/FooterPrimary.stories.js
index 2f1f267c1..fe70f5bd6 100644
--- a/packages/vue-component-library/src/stories/FooterPrimary.stories.js
+++ b/packages/vue-component-library/src/stories/FooterPrimary.stories.js
@@ -61,39 +61,39 @@ const mock = {
 const mockFTVAFooterPrimary = {
   socialItems: [
     {
-      id: "4343807",
-      name: "Facebook",
-      to: "https://www.facebook.com/UCLAFTVArchive/",
+      id: '4343807',
+      name: 'Facebook',
+      to: 'https://www.facebook.com/UCLAFTVArchive/',
       classes: null,
-      target: "1"
+      target: '1'
     },
     {
-      id: "4343808",
-      name: "Instagram",
-      to: "https://www.instagram.com/uclaftvarchive/",
+      id: '4343808',
+      name: 'Instagram',
+      to: 'https://www.instagram.com/uclaftvarchive/',
       classes: null,
-      target: "1"
+      target: '1'
     },
     {
-      id: "4343809",
-      name: "Bluesky",
-      to: "https://bsky.app/profile/uclaftvarchive.bsky.social",
+      id: '4343809',
+      name: 'Bluesky',
+      to: 'https://bsky.app/profile/uclaftvarchive.bsky.social',
       classes: null,
-      target: "1"
+      target: '1'
     },
     {
-      id: "4343810",
-      name: "YouTube",
-      to: "https://www.youtube.com/channel/UCKwx-Ugwnha7SvfyiHBV9iQ",
-      classes: "",
-      target: "1"
+      id: '4343810',
+      name: 'YouTube',
+      to: 'https://www.youtube.com/channel/UCKwx-Ugwnha7SvfyiHBV9iQ',
+      classes: '',
+      target: '1'
     },
     {
-      id: "4343811",
-      name: "Letterboxd",
-      to: "https://letterboxd.com/uclaftvarchive/",
+      id: '4343811',
+      name: 'Letterboxd',
+      to: 'https://letterboxd.com/uclaftvarchive/',
       classes: null,
-      target: "1"
+      target: '1'
     },
   ],
 
diff --git a/packages/vue-component-library/src/styles/dlc/_excerpt-pod.scss b/packages/vue-component-library/src/styles/dlc/_excerpt-pod.scss
new file mode 100644
index 000000000..9753b6000
--- /dev/null
+++ b/packages/vue-component-library/src/styles/dlc/_excerpt-pod.scss
@@ -0,0 +1,93 @@
+.excerpt-pod,
+.excerpt-pod.dlc {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .info {
+        display: flex;
+        gap: 10vw;
+    }
+
+    .title {
+        margin: 0;
+
+        @include ftva-card-title-2;
+    }
+
+    .subtitle {
+        min-width: 200px;
+        margin: 0;
+
+        font-family: var(--font-secondary);
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 160%; /* 25.6px */
+        letter-spacing: 0.16px;
+    }
+
+    .text-excerpt {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        width: 100%;
+    }
+
+    .text {
+        @include ftva-body-2;
+
+        .summary-content {
+            // display: flex;
+            // flex-direction: column;
+            // gap: 5px;
+        }
+    }
+
+    .btn {
+        padding: 5px 5px 5px 0;
+        box-sizing: border-box;
+
+        font-size: 18px;
+        font-weight: 400;
+        line-height: normal;
+
+        display: flex;
+        align-items: center;
+    }
+
+    .caret-icon {
+        @include animate-normal;
+    }
+
+    &.is-open {
+        // .wrapper {
+        //     margin-bottom: 25px;
+        // }
+        .caret-icon {
+            transform: rotate(180deg);
+            translate: 0 3px;
+        }
+    }
+
+    // Breakpoints
+    @media #{$small} {
+        .info {
+            flex-direction: column;
+            gap: 16px;
+        }
+    }
+
+    // Transitions
+    .fade-label-enter-active,
+    .fade-label-leave-active {
+        transition: opacity 0.1s ease-in-out;
+    }
+    .fade-label-enter-from,
+    .fade-label-leave-to {
+        opacity: 0;
+    }
+    .fade-label-enter-to,
+    .fade-label-leave-from {
+        opacity: 1;
+    }
+}