diff --git a/.github/workflows/percy.yml b/.github/workflows/percy.yml
index 152865b1d..c068dd8ae 100644
--- a/.github/workflows/percy.yml
+++ b/.github/workflows/percy.yml
@@ -122,17 +122,27 @@ jobs:
         env:
           CYPRESS_CACHE_FOLDER: $HOME/.cache/Cypress
 
+      - name: Cache Storybook Build
+        id: cache-storybook
+        uses: actions/cache@v3
+        with:
+          path: storybook-static
+          key: storybook-${{ github.sha }}
+
+      - name: Build Storybook
+        if: steps.cache-storybook.outputs.cache-hit != 'true'
+        run: pnpm --filter @ucla-library-monorepo/ucla-library-website-components run build-storybook
+
       - name: Percy via Cypress (internal, Netlify preview)
         uses: cypress-io/github-action@v5
         with:
           working-directory: packages/vue-component-library
           install: false
-          start: "" # using remote Netlify URL
-          wait-on: ${{ github.event.inputs.preview_url }}
-          wait-on-timeout: 180
+          start: pnpm --filter @ucla-library-monorepo/ucla-library-website-components exec http-server ./storybook-static -p 6006
+          wait-on: http://localhost:6006
+          wait-on-timeout: 600
           command-prefix: "percy exec -- pnpx"
         env:
-          CYPRESS_baseUrl: ${{ github.event.inputs.preview_url }}
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_STORYBOOK_VUE3X }}
           PERCY_TARGET_BRANCH: main
 
@@ -165,18 +175,27 @@ jobs:
         env:
           CYPRESS_CACHE_FOLDER: $HOME/.cache/Cypress
 
+      - name: Cache Storybook Build
+        id: cache-storybook
+        uses: actions/cache@v3
+        with:
+          path: storybook-static
+          key: storybook-${{ github.sha }}
+
+      - name: Build Storybook
+        if: steps.cache-storybook.outputs.cache-hit != 'true'
+        run: pnpm --filter @ucla-library-monorepo/ucla-library-website-components run build-storybook
+
       - name: Percy via Cypress (fork, Netlify preview)
         uses: cypress-io/github-action@v5
         with:
           working-directory: packages/vue-component-library
           install: false
-          start: "" # using remote Netlify URL
-          wait-on: ${{ github.event.inputs.preview_url }}
-          wait-on-timeout: 180
+          start: pnpm --filter @ucla-library-monorepo/ucla-library-website-components exec http-server ./storybook-static -p 6006
+          wait-on: http://localhost:6006
+          wait-on-timeout: 600
           command-prefix: "percy exec -- pnpx"
         env:
-          CYPRESS_baseUrl: ${{ github.event.inputs.preview_url }}
-          # NOTE: uses your fork secret name from your earlier snippet
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_STORYBOOK }}
           PERCY_TARGET_BRANCH: main
           PERCY_BRANCH: pr-${{ github.event.inputs.pr_number }}-${{ needs.get-pr-info.outputs.head_ref_sanitized }}
diff --git a/NOTES.md b/NOTES.md
deleted file mode 100644
index 5b88cf2bf..000000000
--- a/NOTES.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Designs:
-https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-25&m=dev
-
-https://www.figma.com/design/CDhWDARLb36ftkQce1LyLC/Breakpoints?node-id=1-26&p=f&m=dev
-
-Read in Recording: 
-https://drive.google.com/file/d/17tiGmE4aax-faoo5Rjue2Idbx3OGCFGa/view?usp=sharing
-
-Relevant Links
-https://www.library.ucla.edu/
-https://digital.library.ucla.edu/catalog/ark:/21198/z1x98m6j
\ No newline at end of file
diff --git a/package.json b/package.json
index 8b70ee1e7..7892a4876 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,5 @@
   },
   "engines": {
     "pnpm": "^9.12.1"
-  },
-  "packageManager": "pnpm@9.12.1"
+  }
 }
\ No newline at end of file
diff --git a/packages/component-library-nuxt-module/CHANGELOG.md b/packages/component-library-nuxt-module/CHANGELOG.md
index 8c83af509..73e14b059 100644
--- a/packages/component-library-nuxt-module/CHANGELOG.md
+++ b/packages/component-library-nuxt-module/CHANGELOG.md
@@ -1,3 +1,15 @@
+# [@ucla-library/component-library-nuxt-module-v1.2.85](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.84...@ucla-library/component-library-nuxt-module-v1.2.85) (2025-10-20)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.84](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.83...@ucla-library/component-library-nuxt-module-v1.2.84) (2025-10-20)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.83](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.82...@ucla-library/component-library-nuxt-module-v1.2.83) (2025-10-17)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.82](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.81...@ucla-library/component-library-nuxt-module-v1.2.82) (2025-10-17)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.81](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.80...@ucla-library/component-library-nuxt-module-v1.2.81) (2025-10-17)
+
+# [@ucla-library/component-library-nuxt-module-v1.2.80](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.79...@ucla-library/component-library-nuxt-module-v1.2.80) (2025-10-17)
+
 # [@ucla-library/component-library-nuxt-module-v1.2.79](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.78...@ucla-library/component-library-nuxt-module-v1.2.79) (2025-10-15)
 
 # [@ucla-library/component-library-nuxt-module-v1.2.78](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library/component-library-nuxt-module-v1.2.77...@ucla-library/component-library-nuxt-module-v1.2.78) (2025-10-10)
diff --git a/packages/component-library-nuxt-module/FORCE_RELEASE.txt b/packages/component-library-nuxt-module/FORCE_RELEASE.txt
index 3e4d8f0c6..7dd7403b7 100644
--- a/packages/component-library-nuxt-module/FORCE_RELEASE.txt
+++ b/packages/component-library-nuxt-module/FORCE_RELEASE.txt
@@ -1 +1 @@
-Triggered release at Wed Oct 15 14:38:07 UTC 2025
+Triggered release at Mon Oct 20 23:38:43 UTC 2025
diff --git a/packages/component-library-nuxt-module/package.json b/packages/component-library-nuxt-module/package.json
index 7b2be7bcb..af1ca49a4 100644
--- a/packages/component-library-nuxt-module/package.json
+++ b/packages/component-library-nuxt-module/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ucla-library/component-library-nuxt-module",
-  "version": "1.2.79",
+  "version": "1.2.85",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/vue-component-library/CHANGELOG.md b/packages/vue-component-library/CHANGELOG.md
index 813d3037f..4b9c003f2 100644
--- a/packages/vue-component-library/CHANGELOG.md
+++ b/packages/vue-component-library/CHANGELOG.md
@@ -1,3 +1,45 @@
+# [@ucla-library-monorepo/ucla-library-website-components-v1.38.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.37.1...@ucla-library-monorepo/ucla-library-website-components-v1.38.0) (2025-10-20)
+
+
+### Features
+
+* creates ButtonIiif component ([#806](https://github.com/UCLALibrary/ucla-library-website-components/issues/806)) ([957c9be](https://github.com/UCLALibrary/ucla-library-website-components/commit/957c9be9064dd755eb37e8d86371f63fc14ea01d))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.37.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.37.0...@ucla-library-monorepo/ucla-library-website-components-v1.37.1) (2025-10-20)
+
+
+### Bug Fixes
+
+* only add primary-with-page-anchor when pageanchor present ([#842](https://github.com/UCLALibrary/ucla-library-website-components/issues/842)) ([04eaa4c](https://github.com/UCLALibrary/ucla-library-website-components/commit/04eaa4cc02e81e53daf0a40838da67113f52feb1))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.37.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.4...@ucla-library-monorepo/ucla-library-website-components-v1.37.0) (2025-10-17)
+
+
+### Features
+
+* add slot to card meta ([#841](https://github.com/UCLALibrary/ucla-library-website-components/issues/841)) ([79eeea8](https://github.com/UCLALibrary/ucla-library-website-components/commit/79eeea85b3e84f7e28054fc5f1d9717e17f624c2))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.36.4](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.3...@ucla-library-monorepo/ucla-library-website-components-v1.36.4) (2025-10-17)
+
+
+### Bug Fixes
+
+* APPS-3471 Truncate long breadcrumb titles ([#837](https://github.com/UCLALibrary/ucla-library-website-components/issues/837)) ([b367f9f](https://github.com/UCLALibrary/ucla-library-website-components/commit/b367f9fdf07486183f83b028dbed88a25e5f019c))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.36.3](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.2...@ucla-library-monorepo/ucla-library-website-components-v1.36.3) (2025-10-17)
+
+
+### Bug Fixes
+
+* APPS-3517 update font color on caption on ImageSlider ([#838](https://github.com/UCLALibrary/ucla-library-website-components/issues/838)) ([6ee2317](https://github.com/UCLALibrary/ucla-library-website-components/commit/6ee23175efcf178718405aba717a220c6ac35a8e))
+
+# [@ucla-library-monorepo/ucla-library-website-components-v1.36.2](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.1...@ucla-library-monorepo/ucla-library-website-components-v1.36.2) (2025-10-17)
+
+
+### Bug Fixes
+
+* percy and eslint issues ([#839](https://github.com/UCLALibrary/ucla-library-website-components/issues/839)) ([430626f](https://github.com/UCLALibrary/ucla-library-website-components/commit/430626f6acdd67fc550240680e0e812a5f9e12e2))
+
 # [@ucla-library-monorepo/ucla-library-website-components-v1.36.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/@ucla-library-monorepo/ucla-library-website-components-v1.36.0...@ucla-library-monorepo/ucla-library-website-components-v1.36.1) (2025-10-15)
 
 
diff --git a/packages/vue-component-library/package.json b/packages/vue-component-library/package.json
index 3b40204a8..5157b1028 100644
--- a/packages/vue-component-library/package.json
+++ b/packages/vue-component-library/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@ucla-library-monorepo/ucla-library-website-components",
   "type": "module",
-  "version": "1.36.1",
+  "version": "1.38.0",
   "homepage": "https://ucla-library-storybook.netlify.app/?path=/docs/configure-your-project--docs",
   "repository": {
     "type": "git",
diff --git a/packages/vue-component-library/src/lib-components/ButtonIiif.vue b/packages/vue-component-library/src/lib-components/ButtonIiif.vue
new file mode 100644
index 000000000..9d248f6db
--- /dev/null
+++ b/packages/vue-component-library/src/lib-components/ButtonIiif.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// Imports
+import { computed } from 'vue'
+import IconIiif from 'ucla-library-design-tokens/assets/svgs/icon-iiif.svg'
+import SmartLink from '@/lib-components/SmartLink.vue'
+import { useTheme } from '@/composables/useTheme'
+
+defineProps<ButtonIiifProps>()
+
+// Theme
+const theme = useTheme()
+
+// Props
+interface ButtonIiifProps {
+  to: string
+}
+// Computed
+const classes = computed(() => (['button-iiif', theme?.value || '']))
+</script>
+
+<template>
+  <SmartLink
+    :to="to"
+    :class="classes"
+  >
+    <IconIiif class="icon-iiif" />
+  </SmartLink>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_button-iiif.scss";
+</style>
diff --git a/packages/vue-component-library/src/lib-components/CardMeta.vue b/packages/vue-component-library/src/lib-components/CardMeta.vue
index 8ca77905f..f068b03a0 100644
--- a/packages/vue-component-library/src/lib-components/CardMeta.vue
+++ b/packages/vue-component-library/src/lib-components/CardMeta.vue
@@ -177,7 +177,9 @@ const classes = computed(() => {
       v-html="category"
     />
 
-    <!-- Named slot for custom title -->
+    <!-- Slot for injecting a title with any tags / styles (useful to substitute h1 tags for accessibility) -->
+    <slot name="anyTitle" />
+    <!-- Named slots for custom title with H3 tags -->
     <h3
       v-if="$slots.customTitle && !to && !title"
       class="custom-title"
@@ -296,13 +298,19 @@ const classes = computed(() => {
     />
 
     <!-- SHARE BUTTON -->
-    <div class="sharebutton-slot">
+    <div
+      v-if="$slots.sharebutton"
+      class="sharebutton-slot"
+    >
       <slot name="sharebutton" />
     </div>
 
     <!-- USED FOR BLOCKTAG SLOT -->
     <!-- MOVES BASED ON DESKTOP OR MOBILE -->
-    <div class="floating-slot">
+    <div
+      v-if="$slots.floatingslot"
+      class="floating-slot"
+    >
       <slot name="floatingslot" />
     </div>
 
diff --git a/packages/vue-component-library/src/lib-components/DateFilter.vue b/packages/vue-component-library/src/lib-components/DateFilter.vue
index e287919a1..e85041e7d 100644
--- a/packages/vue-component-library/src/lib-components/DateFilter.vue
+++ b/packages/vue-component-library/src/lib-components/DateFilter.vue
@@ -286,7 +286,7 @@ onMounted(() => {
             class="event-dots"
           >
             <template
-              v-for=" index in dateFrequency[date.toLocaleDateString()]"
+              v-for="index in dateFrequency[date.toLocaleDateString()]"
               :key="index"
             >
               <!-- limit display to 3 events dots -->
@@ -403,7 +403,7 @@ onMounted(() => {
                 class="event-dots"
               >
                 <template
-                  v-for=" index in dateFrequency[date.toLocaleDateString()]"
+                  v-for="index in dateFrequency[date.toLocaleDateString()]"
                   :key="index"
                 >
                   <!-- limit display to 3 events dots -->
@@ -482,9 +482,12 @@ onMounted(() => {
       font-size: 18px;
       color: $medium-grey;
       border-radius: 8px;
-      &:hover, &:focus {
+
+      &:hover,
+      &:focus {
         border-color: #ddd;
       }
+
       &:hover {
         background-color: #f1f1f1;
       }
diff --git a/packages/vue-component-library/src/lib-components/FiltersDropdown.vue b/packages/vue-component-library/src/lib-components/FiltersDropdown.vue
index d7f12eeef..d71ee7524 100644
--- a/packages/vue-component-library/src/lib-components/FiltersDropdown.vue
+++ b/packages/vue-component-library/src/lib-components/FiltersDropdown.vue
@@ -89,18 +89,33 @@ onMounted(() => {
       </template>
       <template #dropdownItems="{ removeOverlay }">
         <div class="dropdown-filter">
-          <div v-for="group in filterGroups" :key="group.name" class="filter-group">
+          <div
+            v-for="group in filterGroups"
+            :key="group.name"
+            class="filter-group"
+          >
             <h3>{{ group.name }}</h3>
             <div class="pills">
               <!-- <label> must wrap <input> for accessbility fuctionality -->
-              <label v-for="option in group.options" :key="option" class="pill-label">
+              <label
+                v-for="option in group.options"
+                :key="option"
+                class="pill-label"
+              >
                 <!-- Hidden checkbox for managing selection & screen-reader user interaction -->
                 <input
-                  :id="option" v-model="selectedFilters[group.searchField]" type="checkbox" class="pill-checkbox"
-                  :name="option" :value="option"
+                  :id="option"
+                  v-model="selectedFilters[group.searchField]"
+                  type="checkbox"
+                  class="pill-checkbox"
+                  :name="option"
+                  :value="option"
                 >
                 <!-- BlockTag component for display -->
-                <BlockTag :label="option" :is-secondary="true">
+                <BlockTag
+                  :label="option"
+                  :is-secondary="true"
+                >
                   <!-- 'x' SVG only shows when selected -->
                   <template v-if="isSelected(group.searchField, option)">
                     <SvgGlyphX class="close-icon" />
@@ -111,11 +126,15 @@ onMounted(() => {
           </div>
           <div class="action-row">
             <ButtonLink
-              class="action-row-button select-button" label="Done" icon-name="none"
+              class="action-row-button select-button"
+              label="Done"
+              icon-name="none"
               @click="onDoneClick(); removeOverlay();"
             />
             <ButtonLink
-              class="action-row-button clear-button" label="Clear" icon-name="icon-close"
+              class="action-row-button clear-button"
+              label="Clear"
+              icon-name="icon-close"
               @click="clearFilters"
             />
           </div>
diff --git a/packages/vue-component-library/src/lib-components/ImageSlider.vue b/packages/vue-component-library/src/lib-components/ImageSlider.vue
index 016d6bb4a..e4cc0f14a 100644
--- a/packages/vue-component-library/src/lib-components/ImageSlider.vue
+++ b/packages/vue-component-library/src/lib-components/ImageSlider.vue
@@ -139,7 +139,7 @@ function handleSliderInput(event: Event) {
   padding-top: 15px;
   width: 100%;
   text-align: center;
-  color: #737373;
+  color: $medium-grey;
 }
 
 .slider {
diff --git a/packages/vue-component-library/src/lib-components/NavBreadcrumb.vue b/packages/vue-component-library/src/lib-components/NavBreadcrumb.vue
index 7e00c9773..560752e50 100644
--- a/packages/vue-component-library/src/lib-components/NavBreadcrumb.vue
+++ b/packages/vue-component-library/src/lib-components/NavBreadcrumb.vue
@@ -143,9 +143,10 @@ function createBreadcrumbLinks(arr: string[]) {
       const linkIndex = route.path.indexOf(item)
       const linkTo = route.path.substring(0, linkLength + linkIndex)
 
-      // Replace hyphens
+      // Replace hyphens and truncate long text if necessary
       const regex = /-/gi
       let linkTitle = item.replace(regex, ' ')
+      linkTitle = truncateTitle(linkTitle)
 
       // Determine if breadcrumb title should be overridden by data in `overrideTitleGroup` prop
       if (overrideTitleGroup.length > 0) {
@@ -201,6 +202,17 @@ function createBreadcrumbLinks(arr: string[]) {
   }
 }
 
+// Handle title truncation over 40 (mobile), 60 (desktop) characters
+function truncateTitle(str: string): string {
+  const strCount = str.length
+  if (strCount > 40 && isMobile.value)
+    return str.substring(0, 30).padEnd(33, '.')
+  else if (strCount > 60)
+    return str.substring(0, 47).padEnd(50, '.')
+  else
+    return str
+}
+
 // Event handler for parent breadcrumbs; if title prop is passed at page level as the final breadcrumb title, prevent it from from overriding a preceding parent title.
 function handleSetRouteTitle() {
   setRouteTitle.value = true
diff --git a/packages/vue-component-library/src/lib-components/NavPrimary.vue b/packages/vue-component-library/src/lib-components/NavPrimary.vue
index 7765c80c3..24b8e11d7 100644
--- a/packages/vue-component-library/src/lib-components/NavPrimary.vue
+++ b/packages/vue-component-library/src/lib-components/NavPrimary.vue
@@ -314,7 +314,10 @@ onMounted(() => {
         class="slot-container"
         :class="[{ 'is-opened': slotIsOpened, 'is-opened-mobile': mobileMenuIsOpened }]"
       >
-        <slot name="additional-menu" :close-slot="closeSlot" />
+        <slot
+          name="additional-menu"
+          :close-slot="closeSlot"
+        />
       </div>
     </div>
 
diff --git a/packages/vue-component-library/src/lib-components/PageAnchor.vue b/packages/vue-component-library/src/lib-components/PageAnchor.vue
index 9d1fe850e..d6387cfb3 100644
--- a/packages/vue-component-library/src/lib-components/PageAnchor.vue
+++ b/packages/vue-component-library/src/lib-components/PageAnchor.vue
@@ -30,9 +30,11 @@ const classes = computed(() => {
   return ['page-anchor', theme?.value || '']
 })
 
-const isDropdownOpen = ref(theme?.value === 'ftva')
-
 const windowWidth = ref(window.innerWidth)
+
+// If the screen is Desktop and FTVA have pageAnchor default to open
+const isDropdownOpen = ref(theme?.value === 'ftva' && windowWidth.value > 1024)
+
 // Computed
 const sectionName = computed(() => {
   return color || getSectionName(route?.path)
diff --git a/packages/vue-component-library/src/lib-components/SearchGenericFilterButtons.vue b/packages/vue-component-library/src/lib-components/SearchGenericFilterButtons.vue
index a642d4c95..60d02f650 100644
--- a/packages/vue-component-library/src/lib-components/SearchGenericFilterButtons.vue
+++ b/packages/vue-component-library/src/lib-components/SearchGenericFilterButtons.vue
@@ -1,7 +1,4 @@
-<script
-  lang="ts"
-  setup
->
+<script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import type { PropType } from 'vue'
 
@@ -102,10 +99,7 @@ function toggleOpen(index: number) {
   </div>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 .search-generic-filter-buttons {
   width: 100%;
   font-family: var(--font-secondary);
diff --git a/packages/vue-component-library/src/lib-components/SearchGenericViewModes.vue b/packages/vue-component-library/src/lib-components/SearchGenericViewModes.vue
index 6e275a6ad..03307ee5c 100644
--- a/packages/vue-component-library/src/lib-components/SearchGenericViewModes.vue
+++ b/packages/vue-component-library/src/lib-components/SearchGenericViewModes.vue
@@ -97,10 +97,7 @@ function onClick(slug) {
   </div>
 </template>
 
-<style
-  scoped
-  lang="scss"
->
+<style scoped lang="scss">
 .search-generic-view-modes {
   position: relative;
 
diff --git a/packages/vue-component-library/src/lib-components/SectionTeaserCard.vue b/packages/vue-component-library/src/lib-components/SectionTeaserCard.vue
index f9424affe..f58afd81e 100644
--- a/packages/vue-component-library/src/lib-components/SectionTeaserCard.vue
+++ b/packages/vue-component-library/src/lib-components/SectionTeaserCard.vue
@@ -1,7 +1,4 @@
-<script
-  setup
-  lang="ts"
->
+<script setup lang="ts">
 import { computed } from 'vue'
 import type { PropType } from 'vue'
 import IconFTVAVideo from 'ucla-library-design-tokens/assets/svgs/icon-ftva-video.svg'
@@ -36,6 +33,8 @@ const classes = computed(() => {
 const parsedAspectRatio = computed(() => {
   if (items[0].sectionHandle === 'ftvaItemInCollection')
     return 75
+  if (theme?.value === 'dlc')
+    return 108
 
   return 60
 })
@@ -46,7 +45,10 @@ const currentTheme = computed(() => {
 </script>
 
 <template>
-  <ul :class="classes" :data-header="sectionTitle ? sectionTitle : null">
+  <ul
+    :class="classes"
+    :data-header="sectionTitle ? sectionTitle : null"
+  >
     <BlockCardWithImage
       v-for="(item, index) in items"
       :key="`Card${index}`"
@@ -57,9 +59,11 @@ const currentTheme = computed(() => {
       :alternative-full-name="item.alternativeFullName"
       :language="item.language"
       :start-date="item.startDate"
-      :end-date="item.endDate" :text="item.text"
+      :end-date="item.endDate"
+      :text="item.text"
       :image-aspect-ratio="parsedAspectRatio"
-      :is-vertical="true" :byline-one="item.bylineOne"
+      :is-vertical="true"
+      :byline-one="item.bylineOne"
       :byline-two="item.bylineTwo"
       :section-handle="item.sectionHandle"
       :ongoing="item.ongoing"
@@ -70,16 +74,16 @@ const currentTheme = computed(() => {
         <BlockTag v-if="item.videoEmbed && item.videoEmbed !== null">
           <IconFTVAVideo class="white-icon" />
         </BlockTag>
-        <IconFTVAWatchOnline v-if="item.ftvaCollectionType && item.ftvaCollectionType.includes('watchAndListenOnline')" />
+        <IconFTVAWatchOnline
+          v-if="item.ftvaCollectionType && item.ftvaCollectionType.includes('watchAndListenOnline')"
+        />
       </template>
     </BlockCardWithImage>
   </ul>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 @import "@/styles/default/_section-teaser-card.scss";
+@import "@/styles/dlc/_section-teaser-card.scss";
 @import "@/styles/ftva/_section-teaser-card.scss";
 </style>
diff --git a/packages/vue-component-library/src/lib-components/SingleCheckbox.vue b/packages/vue-component-library/src/lib-components/SingleCheckbox.vue
index 378452747..7006f92af 100644
--- a/packages/vue-component-library/src/lib-components/SingleCheckbox.vue
+++ b/packages/vue-component-library/src/lib-components/SingleCheckbox.vue
@@ -45,10 +45,7 @@ function onChange() {
   </div>
 </template>
 
-<style
-  lang="scss"
-  scoped
->
+<style lang="scss" scoped>
 .single-checkbox {
   min-width: 300px;
   // padding: 18px 16px 18px 16px;
diff --git a/packages/vue-component-library/src/lib-components/TwoColLayoutWStickySideBar.vue b/packages/vue-component-library/src/lib-components/TwoColLayoutWStickySideBar.vue
index c8e81a8cc..4987ddb0d 100644
--- a/packages/vue-component-library/src/lib-components/TwoColLayoutWStickySideBar.vue
+++ b/packages/vue-component-library/src/lib-components/TwoColLayoutWStickySideBar.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { Ref } from 'vue'
-import { computed } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import SectionWrapper from '@/lib-components/SectionWrapper.vue'
 
@@ -45,11 +44,11 @@ onMounted(() => {
     <div
       ref="primaryCol"
       class="primary-column top"
-      :class="{ 'primary-with-page-anchor': isPageAnchorMobile }"
+      :class="{ 'primary-with-page-anchor': isPageAnchorMobile && $slots.sidebarPageAnchor }"
     >
       <SectionWrapper class="primary-section-wrapper">
         <!-- PageAnchor moves above primaryTop for tablet/mobile -->
-        <div v-if="isPageAnchorMobile" class="sidebar-mobile-top" :class="pageAnchorStickyClass">
+        <div v-if="isPageAnchorMobile && $slots.sidebarPageAnchor" class="sidebar-mobile-top" :class="pageAnchorStickyClass">
           <slot name="sidebarPageAnchor" />
         </div>
 
@@ -73,7 +72,7 @@ onMounted(() => {
     </div>
 
     <!-- main sidebar column -->
-    <div class="sidebar-column sidebar-main">
+    <div v-if="$slots.sidebarTop || $slots.sidebarBottom" class="sidebar-column sidebar-main">
       <div ref="sidebar" class="sidebar-content-wrapper">
         <slot v-if="!isMobile" name="sidebarTop" />
         <slot v-if="!isMobile" name="sidebarBottom" />
@@ -81,7 +80,7 @@ onMounted(() => {
     </div>
 
     <!-- pageAnchor sidebar column -->
-    <div class="sidebar-column sidebar-page-anchor">
+    <div v-if="$slots.sidebarPageAnchor" class="sidebar-column sidebar-page-anchor">
       <div ref="pageAnchorSidebar" class="sidebar-content-wrapper">
         <slot v-if="!isPageAnchorMobile" name="sidebarPageAnchor" />
       </div>
diff --git a/packages/vue-component-library/src/stories/ButtonIiif.spec.js b/packages/vue-component-library/src/stories/ButtonIiif.spec.js
new file mode 100644
index 000000000..687f11282
--- /dev/null
+++ b/packages/vue-component-library/src/stories/ButtonIiif.spec.js
@@ -0,0 +1,7 @@
+describe('BUTTON / IIIF', () => {
+  it('Default', () => {
+    cy.visit('/iframe.html?id=funkhaus-buttoniiif--default&args=&viewMode=story')
+    cy.get('.button-iiif').should('exist')
+    cy.percySnapshot('BUTTON / IIIF: Default')
+  })
+})
diff --git a/packages/vue-component-library/src/stories/ButtonIiif.stories.js b/packages/vue-component-library/src/stories/ButtonIiif.stories.js
new file mode 100644
index 000000000..bd9e49f83
--- /dev/null
+++ b/packages/vue-component-library/src/stories/ButtonIiif.stories.js
@@ -0,0 +1,17 @@
+import { computed } from 'vue'
+import ButtonIiif from '../lib-components/ButtonIiif.vue'
+
+export default {
+  title: 'Funkhaus / ButtonIiif',
+  component: ButtonIiif,
+}
+
+export const Default = () => ({
+  components: { ButtonIiif },
+  provide() {
+    return {
+      theme: computed(() => 'dlc'),
+    }
+  },
+  template: '<ButtonIiif to="https://iiif.io/" />',
+})
diff --git a/packages/vue-component-library/src/stories/CardMeta.stories.js b/packages/vue-component-library/src/stories/CardMeta.stories.js
index 036f3f62b..7bd9e60e8 100644
--- a/packages/vue-component-library/src/stories/CardMeta.stories.js
+++ b/packages/vue-component-library/src/stories/CardMeta.stories.js
@@ -336,3 +336,34 @@ export function FtvaCustomTitleAndDesription() {
     `,
   }
 }
+
+export function FtvaH1Title() {
+  return {
+    data() {
+      return {
+        ftvaFeaturedArticles: [
+          {
+            articleCategories: 'category',
+            postDate: '2024-10-09T09:00:00-07:00'
+          }
+        ]
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { CardMeta, RichText, SmartLink },
+    template: `
+      <card-meta
+       :category= "ftvaFeaturedArticles[0].articleCategories"
+       :dateCreated="ftvaFeaturedArticles[0].postDate"
+      >
+        <template #anyTitle>
+          <h1>Preserving <em>In Transit</em>: <a href=#>The Chinese</a> in California</h1>
+        </template>
+      </card-meta>
+    `,
+  }
+}
diff --git a/packages/vue-component-library/src/stories/NavBreadcrumb.stories.js b/packages/vue-component-library/src/stories/NavBreadcrumb.stories.js
index e35d49fe4..786755ea2 100644
--- a/packages/vue-component-library/src/stories/NavBreadcrumb.stories.js
+++ b/packages/vue-component-library/src/stories/NavBreadcrumb.stories.js
@@ -135,6 +135,16 @@ const titlesOverride3 = [
   }
 ]
 
+export const TruncatedTitleLongChild = DynamicModeTemplate.bind({})
+TruncatedTitleLongChild.args = {
+  route: '/collections/ktla-news-project-tom-bradley-mayor-of-los-angeles/kenneth-hahn-and-tom-bradley-discuss-the-legacy-of-supreme-court-chief-justice-earl-warren/',
+}
+
+export const TruncatedTitleLongParent = DynamicModeTemplate.bind({})
+TruncatedTitleLongParent.args = {
+  route: '/collections/kenneth-hahn-and-tom-bradley-discuss-the-legacy-of-supreme-court-chief-justice-earl-warren/ktla-news-project-tom-bradley-mayor-of-los-angeles/',
+}
+
 const FTVATemplate = (args) => {
   router.push(args.route)
   return {
diff --git a/packages/vue-component-library/src/stories/SectionTeaserCard.stories.js b/packages/vue-component-library/src/stories/SectionTeaserCard.stories.js
index 0e97b4efc..b25237433 100644
--- a/packages/vue-component-library/src/stories/SectionTeaserCard.stories.js
+++ b/packages/vue-component-library/src/stories/SectionTeaserCard.stories.js
@@ -238,6 +238,111 @@ export function Default() {
   }
 }
 
+// DLC Theme Edge Cases Story
+const mockDLCEdgeCases = [
+  {
+    id: 'dlc-1',
+    to: '/collections/digital-archives',
+    title: 'Digital Archives Collection',
+    text: 'Explore our extensive collection of digitized materials including manuscripts, photographs, and historical documents spanning over 200 years of UCLA history.',
+    image: API.image,
+    sectionHandle: 'collection'
+  },
+  {
+    id: 'dlc-2',
+    to: '/collections/special-collections',
+    title: 'Special Collections & Rare Books',
+    text: 'Discover rare books, manuscripts, and unique materials that form the cornerstone of our research collections. These items provide invaluable insights into various academic disciplines.',
+    image: {
+      id: '3156835',
+      src: 'https://static.library.ucla.edu/craftassetstest/images/_fullscreen/TomReed_MalcolmX.webp',
+      height: 1813,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/images/_375xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 375w, https://static.library.ucla.edu/craftassetstest/images/_960xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 960w, https://static.library.ucla.edu/craftassetstest/images/_1280xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 1280w, https://static.library.ucla.edu/craftassetstest/images/_1920xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 1920w, https://static.library.ucla.edu/craftassetstest/images/_2560xAUTO_crop_center-center_none/TomReed_MalcolmX.webp 2560w',
+      alt: 'Tom Reed hosting an episode exploring the teachings of Malcolm X',
+      focalPoint: [0.5, 0.5]
+    },
+    sectionHandle: 'collection'
+  },
+  {
+    id: 'dlc-3',
+    to: '/collections/ethnographic-materials',
+    title: 'Ethnographic Materials & Cultural Artifacts',
+    text: 'A comprehensive collection of ethnographic materials including audio recordings, photographs, and cultural artifacts from communities around the world. These materials support interdisciplinary research in anthropology, ethnomusicology, and cultural studies.',
+    image: {
+      id: '3280534',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/kpil7j-21cut1large.webp',
+      height: 1664,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/kpil7j-21cut1large.webp 2560w',
+      alt: 'many hot air balloons in the air',
+      focalPoint: [0.5, 0.5]
+    },
+    sectionHandle: 'collection'
+  },
+  {
+    id: 'dlc-4',
+    to: '/collections/art-architecture',
+    title: 'Art & Architecture Collections',
+    text: 'Extensive visual resources including architectural drawings, art slides, and digital images supporting research in art history, architecture, and visual culture studies.',
+    image: {
+      id: '3701680',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/PXL_20240323_163248504.jpg',
+      height: 1920,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/PXL_20240323_163248504.jpg 2560w',
+      alt: 'Image alt text here',
+      focalPoint: [0.5, 0.5]
+    },
+    sectionHandle: 'collection'
+  },
+  {
+    id: 'dlc-5',
+    to: '/collections/geographic-information',
+    title: 'Geographic Information Systems & Maps',
+    text: 'Comprehensive collection of maps, atlases, and geospatial data supporting research in geography, urban planning, environmental studies, and related fields.',
+    image: API.image,
+    sectionHandle: 'collection'
+  },
+  {
+    id: 'dlc-6',
+    to: '/collections/audio-visual',
+    title: 'Audio-Visual Materials & Media Archives',
+    text: 'Extensive collection of audio recordings, video materials, and digital media including oral histories, documentaries, and multimedia resources for research and instruction.',
+    image: {
+      id: '3151261',
+      src: 'https://static.library.ucla.edu/craftassetstest/FTVA/_fullscreen/pinkcloud-crop.png',
+      height: 1920,
+      width: 2560,
+      srcset: 'https://static.library.ucla.edu/craftassetstest/FTVA/_375xAUTO_crop_center-center_none/pinkcloud-crop.png 375w, https://static.library.ucla.edu/craftassetstest/FTVA/_960xAUTO_crop_center-center_none/pinkcloud-crop.png 960w, https://static.library.ucla.edu/craftassetstest/FTVA/_1280xAUTO_crop_center-center_none/pinkcloud-crop.png 1280w, https://static.library.ucla.edu/craftassetstest/FTVA/_1920xAUTO_crop_center-center_none/pinkcloud-crop.png 1920w, https://static.library.ucla.edu/craftassetstest/FTVA/_2560xAUTO_crop_center-center_none/pinkcloud-crop.png 2560w',
+      alt: 'A woman writing on a window.',
+      focalPoint: [0.5, 0.5]
+    },
+    sectionHandle: 'collection'
+  }
+]
+
+export function DLCEdgeCases() {
+  return {
+    data() {
+      return { items: mockDLCEdgeCases }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    components: { SectionTeaserCard },
+    template: `
+      <section-teaser-card
+        :items="items"
+        section-title="DLC Collections - Edge Cases"
+        :grid-layout="true"
+      />
+  `,
+  }
+}
+
 export function FTVAEventDetail() {
   return {
     data() {
diff --git a/packages/vue-component-library/src/styles/dlc/_button-iiif.scss b/packages/vue-component-library/src/styles/dlc/_button-iiif.scss
new file mode 100644
index 000000000..8e13cf4a4
--- /dev/null
+++ b/packages/vue-component-library/src/styles/dlc/_button-iiif.scss
@@ -0,0 +1,32 @@
+.button-iiif,
+.button-iiif.dlc {
+    display: inline-block;
+    width: 60px;
+    height: auto;
+
+    .icon-iiif {
+        width: 100%;
+        height: auto;
+        :deep() {
+            path {
+                transition: fill 0.3s ease-out;
+            }
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        &:hover {
+            :deep() {
+                path:nth-child(1),
+                path:nth-child(3) {
+                    fill: var(--color-button-iiif-red);
+                }
+                path:nth-child(2),
+                path:nth-child(4) {
+                    fill: var(--color-button-iiif-blue);
+                }
+            }
+        }
+    }
+}
diff --git a/packages/vue-component-library/src/styles/dlc/_section-teaser-card.scss b/packages/vue-component-library/src/styles/dlc/_section-teaser-card.scss
new file mode 100644
index 000000000..b6947117c
--- /dev/null
+++ b/packages/vue-component-library/src/styles/dlc/_section-teaser-card.scss
@@ -0,0 +1,81 @@
+.section-teaser-card.dlc{
+    :deep(.card) {
+        height: 100%;
+        cursor: pointer;
+
+        .block-highlight {
+            height: 100%;
+            width: 100%;
+
+            border-radius: 5px;
+
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .image-container {
+            .image {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .card-meta {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+
+            margin: 0;
+        }
+        .title,
+        .title-no-link {
+            margin: 25px 0 0;
+
+            text-align: left;
+            font-family: var(--font-primary);
+            font-size: 24px;
+            font-weight: medium;
+            line-height: 120%; /* 28.8px */
+            color: var(--color-primary-blue-03);
+
+            text-decoration: underline;
+            text-decoration-color: transparent;
+            text-decoration-thickness: 2px;
+            text-underline-offset: 2px;
+
+            transition: color 0.2s ease-in-out,
+                text-decoration-color 0.2s ease-in-out;
+        }
+
+        .text {
+            margin: 0;
+
+            text-align: left;
+            font-family: var(--font-secondary);
+            font-size: 18px;
+            font-weight: 400;
+            line-height: 150%; /* 24px */
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        :deep(.card):hover {
+            .title,
+            .title-no-link {
+                color: var(--color-black);
+                text-decoration-color: var(--color-secondary-blue-03);
+            }
+        }
+    }
+
+    // Breakpoints
+    @media #{$small} {
+        align-items: center;
+        gap: 40px;
+
+        .card {
+            width: 100%;
+        }
+    }
+}