@asd20/ui-next 2.34.5 → 2.35.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.35.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.34.6...ui-next-v2.35.0) (2026-11-03)
+
+
+### Features
+
+* upgrade to node 24 / npm 11.19.1; add agents.md ([8ad319b](https://github.com/academydistrict20/asd20-ui-next/commit/8ad319bcb784c1856d4d1f05351a4e47d0b34ca0))
+
+## [2.34.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.34.5...ui-next-v2.34.6) (2026-11-02)
+
+
+### Bug Fixes
+
+* update campus template with new styles ([7464df8](https://github.com/academydistrict20/asd20-ui-next/commit/7464df8de3d9979ab4a6387c572ae9f798cb4a4a))
+
 ## [2.34.5](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.34.4...ui-next-v2.34.5) (2026-11-02)
 
 

package/README.md

@@ -2,7 +2,7 @@
 
 Shared Vue 3 UI package for Academy District 20 websites and web apps.
 
-Current local version: `2.13.3`
+Current local version: `2.34.6`
 
 This package is the active shared presentation layer for the ASD20 web platform.
 It provides reusable components, public website templates, app-shell templates,
@@ -28,12 +28,22 @@ multi-repo contract, not as an app-local component folder.
 
 ## Runtime Contract
 
+Development, builds, and releases use Node `24.22.2` and npm `11.19.1`
+(bundled with that Node release). `.nvmrc`, `.node-version`, `packageManager`,
+and the release workflow pin those versions. CI explicitly installs the pinned
+npm version to keep local and release tooling aligned.
+
+The published library keeps these consumer requirements:
+
 - Node `>=20`
 - npm `>=10`
 - Vue peer dependency `^3.0.0`
+
+Development tools:
+
 - Demo and packed-consumer build system: Vite
 - Unit test runner: Vitest
-- Component development: Storybook 8 with its retained webpack 5 builder
+- Component development: Storybook 10 with Vite
 
 ## Breadcrumb Navigation
 
@@ -102,7 +112,12 @@ package `exports` map.
 ## Local Development
 
 ```sh
-npm install
+nvm install
+nvm use
+npm install --global npm@11.19.1
+node --version # v24.22.2
+npm --version # 11.19.1
+npm ci
 npm run storybook
 npm test
 npm run build
@@ -153,8 +168,9 @@ Verify the packed consumer install path:
 npm run verify:release
 ```
 
-That command packs the staged package, installs it into a temporary Vue 3 Vite
-smoke app, imports the public
+That command checks icon metadata, runs the unit tests and `verify:publish`,
+then packs the staged package and extracts it into a temporary Vue 3 Vite
+smoke app with dependencies linked from this checkout. It imports the public
 components/templates/icons/helpers/directives/styles, verifies the package's
 complete Vite development optimizer input set from a clean cache, and confirms
 the production consumer build succeeds with Vite's default CSS minifier.
@@ -168,6 +184,11 @@ npm run release
 The release flow publishes from `dist/package`, tags as `ui-next-v${version}`,
 and runs `npm run verify:release` before publishing.
 
+The main-branch workflow publishes automatically. For local validation, run
+`npm run lint`, `npm run verify:release`, and `npm run build-storybook`;
+`verify:release` includes `verify:publish`. These checks do not publish.
+A development-runtime upgrade alone does not require a new library release.
+
 ## Change Guidance
 
 The [PDFService implementation overview](docs/projects/pdf-service/README.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.34.5",
+  "version": "2.35.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/organisms/Asd20CampusHeader/index.vue

@@ -1,78 +1,64 @@
 <template>
-  <header
-    v-scroll-track.window
-    class="asd20-campus-header"
-    :class="classes"
-    role="banner"
-  >
+  <header class="asd20-campus-header" :class="classes" role="banner">
     <div class="asd20-campus-header__top">
-      <!-- Use v-show here so breakpoint-driven visibility changes do not alter the hydrated structure. -->
-      <asd20-district-logo
-        v-show="
-          organization.title === 'Academy District 20' &&
-            mq !== 'sm' &&
-            mq !== 'md'
-        "
-      ></asd20-district-logo>
-      <asd20-organization-picker
-        v-show="organization.title !== 'Academy District 20'"
-        :organization-options="organizationOptions"
-        :organization="organization"
-      ></asd20-organization-picker>
+      <template v-if="organization">
+        <asd20-district-logo
+          v-if="organization.title === 'Academy District 20'"
+        />
+        <asd20-organization-picker
+          v-else
+          :organization-options="organizationOptions"
+          :organization="organization"
+        />
+      </template>
       <slot name="top" />
     </div>
 
     <div class="asd20-campus-header__content">
-      <div class="heading-container">
-        <div
-          v-if="$slots.notification"
-          class="asd20-campus-header__heading-combo"
-        >
-          <slot name="notification" />
-        </div>
-        <h2
-          v-if="heading"
-          v-html="heading"
-        />
-      </div>
       <div
-        v-if="lead"
-        class="asd20-campus-header__lead"
+        v-if="$slots.notification"
+        class="asd20-campus-header__notifications"
       >
-        <span v-html="lead"></span>
+        <slot name="notification" />
       </div>
+      <h1 v-if="heading" v-html="heading" />
+      <div v-if="lead" class="asd20-campus-header__lead" v-html="lead" />
     </div>
 
-    <div class="asd20-campus-header__image">
-      <div
-        v-for="(image, index) in campusImages"
-        :key="index"
-      >
-        <img
-          :src="image.url"
-          :alt="image.alt"
-        />
-      </div>
-    </div>
-
-    <div class="call-to-action-container">
-      <div
-        v-if="callsToAction.length > 0"
-        class="asd20-campus-header__call-to-action"
-      >
-        <asd20-button
-          v-for="(cta, index) in callsToAction"
+    <div v-if="campusPanels.length" class="asd20-campus-header__schools">
+      <div class="asd20-campus-header__panels">
+        <div
+          v-for="(panel, index) in campusPanels"
           :key="index"
-          :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
-          :label="cta.label"
-          :icon="cta.icon"
-          :link="cta.url"
-          :tracking-code="cta.trackingCode"
-          :public-form-id="cta.publicFormId"
-          reversed
-          horizontal
-          centered
-        />
+          class="asd20-campus-header__school"
+        >
+          <div
+            class="asd20-campus-header__photo"
+            :class="{ 'asd20-campus-header__photo--empty': !panel.image.url }"
+          >
+            <img
+              v-if="panel.image.url"
+              :src="panel.image.url"
+              :alt="panel.image.alt"
+              :width="panel.image.width"
+              :height="panel.image.height"
+              decoding="async"
+              @error="onImageError(panel.image.url)"
+            />
+          </div>
+          <asd20-button
+            v-if="panel.cta"
+            class="asd20-campus-header__school-link"
+            :label="panel.cta.label"
+            :icon="panel.cta.icon || 'chevron'"
+            :icon-angle="panel.cta.icon ? 0 : 90"
+            :link="panel.cta.url"
+            :tracking-code="panel.cta.trackingCode"
+            :public-form-id="panel.cta.publicFormId"
+            horizontal
+            opposite
+          />
+        </div>
       </div>
     </div>
     <slot />
@@ -80,13 +66,9 @@
 </template>
 
 <script>
-import scrollTrack from '../../../directives/scroll-track'
-import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
 import Asd20Button from '../../atoms/Asd20Button'
-import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
-import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
-import organizationTitle from '../../../helpers/organizationTitle'
-import organizationSubtitle from '../../../helpers/organizationSubtitle'
+import Asd20DistrictLogo from '../../atoms/Asd20DistrictLogo'
+import Asd20OrganizationPicker from '../Asd20OrganizationPicker'
 
 export default {
   name: 'Asd20CampusHeader',
@@ -95,8 +77,6 @@ export default {
     Asd20DistrictLogo,
     Asd20OrganizationPicker,
   },
-  directives: { scrollTrack },
-  mixins: [responsiveBreakpointMixin],
   props: {
     organization: { type: Object, default: null },
     organizationOptions: { type: Array, default: () => [] },
@@ -110,34 +90,65 @@ export default {
     detailLinkLabel: { type: String, default: '' },
     images: { type: Array, default: () => [] },
   },
+  data: () => ({ failedImageUrls: [] }),
   computed: {
     classes() {
       return {
         'asd20-campus-header--fullscreen': this.fullscreen,
-        'asd20-campus-header--has-cta': this.callsToAction
-          ? this.callsToAction.length > 0
-          : false,
+        'asd20-campus-header--has-cta': this.callsToAction?.length > 0,
       }
     },
-    isDetailPage() {
-      if (typeof window === 'undefined') return false
-      return (
-        window.location.pathname.split('/').pop() ===
-        this.detailLink.split('/').pop()
+    campusImages() {
+      const images = this.images?.length
+        ? this.images
+        : this.imageUrl
+        ? [{ url: this.imageUrl, alt: this.imageCaption }]
+        : []
+
+      // Keep each image's position, even when its files are missing, so the
+      // elementary/middle/high links never move to a different school's photo.
+      return images.map(image => {
+        const files = Array.isArray(image?.files)
+          ? image.files.filter(file => file?.url)
+          : []
+        const candidates = [
+          files.find(file => file.name === 'full'),
+          ...files,
+          image?.url ? image : null,
+        ]
+        const file = candidates.find(
+          file => file?.url && !this.failedImageUrls.includes(file.url)
+        )
+        return {
+          url: file?.url || '',
+          alt: image?.metadata?.alt || image?.alt || '',
+          width: file?.width,
+          height: file?.height,
+        }
+      })
+    },
+    campusPanels() {
+      const callsToAction = this.callsToAction || []
+      return Array.from(
+        { length: Math.max(this.campusImages.length, callsToAction.length) },
+        (_, index) => ({
+          image: this.campusImages[index] || { url: '', alt: '' },
+          cta: callsToAction[index],
+        })
       )
     },
-    campusImages() {
-      let images = this.images || []
-      return images.map(i => ({
-        url: (i.files.find(f => f.name === 'full') || i.files[0]).url,
-        alt: i.metadata.alt,
-      }))
+  },
+  watch: {
+    images() {
+      this.failedImageUrls = []
     },
-    mapOrganizationTitle() {
-      return organizationTitle(this.organization.title)
+    imageUrl() {
+      this.failedImageUrls = []
     },
-    mapOrganizationSubtitle() {
-      return organizationSubtitle(this.organization.title)
+  },
+  methods: {
+    onImageError(url) {
+      if (!this.failedImageUrls.includes(url)) this.failedImageUrls.push(url)
     },
   },
 }
@@ -148,281 +159,173 @@ export default {
 
 .asd20-campus-header {
   position: relative;
-  display: flex;
   flex-shrink: 0;
-  flex-direction: column;
-  box-sizing: border-box;
-  margin: space(1);
-  .heading-container {
-    margin-bottom: space(1);
-  }
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: space(3);
-    bottom: space(0);
-    right: space(0);
-    left: space(0);
-    background: var(--website-header__background-color)
-      var(--website-header__background-style);
-    z-index: -2;
-    border-radius: var(--website-shape__radius-l);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  background-color: var(--website-page__background-color, #fff);
+
+  &__top,
+  &__content,
+  &__panels {
+    box-sizing: border-box;
+    width: min(100%, 90rem);
+    margin-inline: auto;
+    padding-inline: clamp(1rem, 4vw, 4rem);
   }
-  &__top {
-    --fill-one: rgba(255, 255, 255, 1);
-    --fill-two: rgba(255, 255, 255, 0.625);
 
+  &__top {
     position: relative;
     z-index: 101;
-    background: white;
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
     align-items: center;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: space(0.25);
-    .asd20-logo {
-      margin: 0 space(1) space(1) space(1);
-    }
+    justify-content: space-between;
+    gap: 1rem;
+    padding-block: 1.25rem;
   }
 
-  h2 {
+  &__content {
     position: relative;
-    color: var(--website-header__title-color);
-    @include asd20-font(
-      1.5,
-      var(--website-typography__font-family-headlines),
-      1.2,
-      700
-    );
-    margin: space(1) space(1) space(1) space(1);
-    z-index: 1;
-  }
-  &__heading-combo {
-    margin: space(2) space(1) 0 0;
-    order: 2;
+    padding-block: clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 2.75rem);
   }
 
-  &__lead {
-    position: relative;
-    z-index: 1;
-    color: var(--website-header__title-color);
-    @include asd20-font(1, var(--website-typography__font-family-headlines));
-    margin: space(-0.5) space(2) space(1) space(1);
-    a {
-      color: var(--website-header__link-color);
-    }
+  h1 {
+    max-width: 22ch;
+    margin: 0;
+    color: var(--color__primary);
+    font-family: var(--website-typography__font-family-headlines);
+    font-size: clamp(2rem, 4.5vw, 4rem);
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: -0.035em;
+    text-wrap: balance;
   }
 
-  &__call-to-action {
-    margin: 0 space(2) space(-0.5) space(1);
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    .asd20-button {
-      flex-grow: 1;
-      width: 100%;
-      margin-bottom: space(1);
-      /*   max-width: 25vw;*/
-      font-size: 0.875rem !important;
-      background-color: var(
-        --website-header__button-background-color,
-        var(--color__accent)
-      );
-      color: var(
-        --website-header__button-foreground-color,
-        var(--color__accent-t100)
-      );
-      &:hover,
-      &:focus {
-        background-color: var(
-          --website-header__button-hover-background-color,
-          var(--color__accent-s10)
-        );
-        color: var(
-          --website-header__button-hover-foreground-color,
-          var(--color__accent-t100)
-        );
-      }
-
-      &:not(:last-child) {
-        margin-right: space(0.5);
-      }
+  &__lead {
+    max-width: 62ch;
+    margin-top: 1.25rem;
+    color: var(--website-page__foreground-color, #333);
+    font-family: var(--website-typography__font-family-body);
+    font-size: clamp(1rem, 1.4vw, 1.2rem);
+    line-height: 1.65;
+    :deep(a) {
+      color: var(--color__primary);
+      text-decoration: underline;
     }
   }
 
-  /* Hide images on mobile*/
-  &__image {
-    display: none;
-  }
-
-  /* Add a bit more space at the bottom*/
-  /* if cta is present*/
-  &--has-cta {
-    margin-bottom: space(1);
-    &::after {
-      bottom: space(-1);
+  &__notifications {
+    margin-bottom: 1.5rem;
+    &:empty {
+      display: none;
     }
   }
-}
 
-$min: 3rem;
-$max: 4rem;
-@media (min-width: 667px) {
-  .asd20-campus-header {
-    &__top {
-      flex-direction: row;
-      justify-content: space-between;
-      padding: 0 space(1);
-      align-items: center !important;
-    }
-  }
-}
+  &__schools {
+    position: relative;
+    isolation: isolate;
+    padding-bottom: clamp(2rem, 4vw, 4rem);
 
-@media (min-width: 1024px) {
-  .asd20-campus-header {
-    display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) 0.6fr repeat(17, space(1));
-    margin-top: 0;
-    margin-bottom: 0;
-    .heading-container {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: space(1);
-    }
+    // Keep the configured campus artwork in a visible, contained layer.
+    // It is decorative: school names and CTAs sit on solid surfaces.
     &::before {
       content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      margin-left: 0;
+      position: absolute;
+      z-index: -1;
+      inset: 4rem 0 0;
       background-color: var(
-        --website-header__button-background-color,
-        var(--color__accent)
+        --website-header__background-color,
+        var(--color__primary)
       );
-      opacity: 0.9;
-      z-index: 2;
-      grid-column: 2 / 13;
-      grid-row: 23 / 25;
-    }
-    &::after {
-      top: space(6);
-    }
-
-    /* Provide space between logo and breadcrumb*/
-    /* TODO: Revisit for school logo*/
-    & :deep(.asd20-logo + .asd20-breadcrumb) {
-      margin-top: space(2);
+      background: var(--website-header__background-color, var(--color__primary))
+        var(--website-header__background-style, none);
     }
+  }
 
-    &__top {
-      margin: 0;
-      padding: space(1) space(3) space(1) space(3);
-      grid-column: 1/-1;
-      grid-row: 1/7;
-      background: transparent;
-      justify-content: space-between;
-      .asd20-logo {
-        margin: 0;
-      }
-    }
+  &__panels {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 1.25rem;
+  }
 
-    &__content {
-      position: relative;
-      grid-column: 2 / 13;
-      grid-row: 7 / 9;
+  &__school {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    background: var(--website-page__background-color, #fff);
+    border-radius: var(--website-shape__radius-l, 1rem);
+    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 12%);
+    // Leave the link's focus outline visible outside the panel.
+    &:focus-within {
+      outline: 3px solid var(--color__primary);
+      outline-offset: 4px;
     }
+  }
 
-    h2 {
-      margin: space(2) 0 space(1) 0;
+  &__photo {
+    overflow: hidden;
+    aspect-ratio: 4 / 3;
+    border-radius: var(--website-shape__radius-l, 1rem)
+      var(--website-shape__radius-l, 1rem) 0 0;
+    background: var(--color__primary-t90, #eee);
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
     }
-    &__heading-combo {
-      margin: space(2) 0 0 0;
-      /* order: 2;*/
+    &--empty {
+      background: linear-gradient(
+        135deg,
+        var(--color__primary-t90),
+        var(--color__primary-t70)
+      );
     }
+  }
 
-    &__lead {
-      /* Make it closer to the h1*/
-      margin: space(-0.5) 0 0 0;
-    }
-    .call-to-action-container {
-      grid-column: 2 / 13;
-      grid-row-start: 24;
-      z-index: 2;
+  &__school-link {
+    box-sizing: border-box;
+    flex: 1;
+    width: 100%;
+    min-height: 4.5rem;
+    margin: 0;
+    padding: 1.25rem;
+    border: 0;
+    border-top: 4px solid var(--color__primary);
+    border-radius: 0 0 var(--website-shape__radius-l, 1rem)
+      var(--website-shape__radius-l, 1rem);
+    background: var(--website-page__background-color, #fff);
+    color: var(--color__primary);
+    box-shadow: none;
+    // Override the shared button's fluid font size, which uses !important.
+    font-size: 1rem !important;
+    line-height: 1.4;
+    text-align: left;
+    justify-content: space-between;
+    gap: 0.75rem;
+    :deep(.asd20-button__label) {
       margin: 0;
-      height: min-content;
-      align-self: end;
-      justify-content: space-between;
+      overflow-wrap: anywhere;
     }
-
-    &__call-to-action {
-      z-index: 2;
-      margin: 0;
-      height: min-content;
-      align-self: end;
-      display: flex;
-      flex-direction: row;
-      & :deep(.asd20-button) {
-        margin: 0 !important;
-        text-align: left !important;
-        min-height: space(1);
-        font-size: 1rem !important;
-        background: rgba(255, 255, 255, 0);
-        max-width: inherit;
-        z-index: 3;
-        border-radius: 0;
-        width: 10vw;
-      }
-      & :deep(.asd20-button:hover) {
-        background: rgba(255, 255, 255, 0) !important;
-      }
+    :deep(.asd20-icon) {
+      flex-shrink: 0;
+      color: inherit;
     }
-
-    &__lead + &__call-to-action {
-      margin-top: 0;
+    &:hover,
+    &:focus-visible {
+      background: var(--color__primary);
+      color: var(--color__on-primary, #fff);
+      box-shadow: none;
     }
-
-    &__image {
-      display: flex;
-      position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 1 / 14;
-      grid-row: 13 / 26;
-      z-index: 1;
-      height: auto;
-      margin: 0;
-      padding: 0;
-      transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);
-      border-radius: var(--website-shape__radius-l);
-      overflow: hidden;
-      &__image_container {
-        display: flex;
-      }
-      div {
-        border-right: 5px solid var(--website-header__background-color);
-      }
-      div:last-child {
-        border-right: none;
-      }
-
-      img {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-      }
+    &:focus-visible {
+      outline: 3px solid currentColor;
+      outline-offset: -6px;
     }
   }
 }
+
+@media (min-width: 768px) {
+  .asd20-campus-header__panels {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
 </style>

package/src/components/organisms/Asd20PageFooter/index.vue

@@ -275,7 +275,7 @@ export default {
 
       if (!isDistrict && hasExteriorPhoto) {
         return {
-          '--school-exterior-photo-url': `url(${this.organization.exteriorPhotoUrl})`,
+          '--school-exterior-photo-url': `url(${JSON.stringify(this.organization.exteriorPhotoUrl)})`,
         }
       }
       return null

package/src/components/templates/Asd20CampusTemplate/index.vue

@@ -1,25 +1,20 @@
 <template>
   <div class="asd20-template-campus">
-    <!-- Skip Nav -->
     <asd20-skip-to></asd20-skip-to>
-
-    <!-- Banner Notifications -->
     <asd20-notification-group
       :notifications="activeNotificationsByType.banner"
       group-type="banner"
       @dismiss="$emit('dismiss-notification', $event)"
       @toggle-all="$emit('toggle-all')"
     ></asd20-notification-group>
-
-    <!-- Page Header -->
     <asd20-campus-header
-      v-show="pageHeaderContent"
+      v-if="pageHeaderContent"
       v-bind="pageHeaderContent"
       id="campus-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"
-      :images="firstMessage.images"
+      :images="firstMessage.images || []"
       :breadcrumb-links="breadcrumbLinks"
       @update:languageCode="$emit('update:languageCode', $event)"
     >
@@ -57,8 +52,13 @@
           </a>
         </div>
       </template>
-      <!-- Floating Notifications -->
-      <template #notification>
+      <template
+        v-if="
+          activeNotificationsByType.floating.length ||
+          totalDismissedNotifications
+        "
+        #notification
+      >
         <asd20-notification-group
           class="asd20-notification-group--floating"
           :notifications="activeNotificationsByType.floating"
@@ -68,78 +68,38 @@
           @toggle-all="$emit('toggle-all')"
         ></asd20-notification-group>
       </template>
-
-      <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
     </asd20-campus-header>
-
-    <!-- Site Navigation -->
-    <!-- <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation> -->
-
-    <!-- Page Content -->
-    <asd20-page-content
-      :primary-messages="wayFindingPrimaryMessages"
-      :secondary-messages="secondaryMessages"
-      omit-body-content
-      grid
-    >
-      <!-- Inline-Notifications -->
+    <main id="main" tabindex="-1">
       <asd20-notification-group
         :notifications="activeNotificationsByType.inline"
         group-type="inline"
         @dismiss="$emit('dismiss-notification', $event)"
         @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-
-      <slot></slot>
-    </asd20-page-content>
-
-    <asd20-feeds-section
-      :announcements="announcements"
-      :announcements-feed-props="announcementsFeedProps"
-      :stories="stories"
-      :stories-feed-props="storiesFeedProps"
-      :events="events"
-      :events-feed-props="eventsFeedProps"
-      :organization="organization"
-      :organization-options="organizationOptions"
-      @announcements-in-view="$emit('announcements-in-view')"
-      @stories-in-view="$emit('stories-in-view')"
-      @events-in-view="$emit('events-in-view')"
-    ></asd20-feeds-section>
-
-    <!-- Bottom Widgets -->
-    <!-- <asd20-widgets-section
-      v-if="
-        widgetsSectionProps.footer ||
-          widgetsSectionProps.sidebar ||
-          $slots.widgets
-      "
-      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
-      @events-in-view="$emit('events-in-view')"
-      @files-in-view="$emit('files-in-view')"
-      @people-in-view="$emit('people-in-view')"
-      full
-      ><slot name="widgets"
-    /></asd20-widgets-section> -->
-
-    <!-- <slot name="before-footer" /> -->
-
-    <!-- Quick Links -->
-    <!-- <template #before-footer><asd20-quicklinks-menu :quick-links="quickLinks">
-      <slot name="quicklinks-menu" />
-    </asd20-quicklinks-menu></template> -->
-
-    <!-- Footer -->
+      />
+      <asd20-page-content
+        tag="section"
+        :primary-messages="wayFindingPrimaryMessages"
+        :secondary-messages="secondaryMessages"
+        omit-body-content
+        grid
+      >
+        <slot></slot>
+      </asd20-page-content>
+
+      <asd20-feeds-section
+        :announcements="announcements"
+        :announcements-feed-props="announcementsFeedProps"
+        :stories="stories"
+        :stories-feed-props="storiesFeedProps"
+        :events="events"
+        :events-feed-props="eventsFeedProps"
+        :organization="organization"
+        :organization-options="organizationOptions"
+        @announcements-in-view="$emit('announcements-in-view')"
+        @stories-in-view="$emit('stories-in-view')"
+        @events-in-view="$emit('events-in-view')"
+      ></asd20-feeds-section>
+    </main>
     <asd20-page-footer
       :organization="organization"
       :social-links="socialLinks"
@@ -153,24 +113,14 @@
 </template>
 
 <script>
-// Components
 import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
 import Asd20CampusHeader from '../../../components/organisms/Asd20CampusHeader'
-
-// import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
 import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
-
-// import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
 import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
-// import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
-
 import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
-// import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
 import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
 import { navigateInternalHref } from '../../../helpers/linkPolicy'
 
-
-// Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
 
 export default {
@@ -180,25 +130,22 @@ export default {
     Asd20SkipTo,
     Asd20CampusHeader,
     Asd20PageFooter,
-    // Asd20SiteNavigation,
-    // Asd20WidgetsSection,
     Asd20FeedsSection,
     Asd20NotificationGroup,
-    // Asd20QuicklinksMenu,
-    // Asd20MediaSection,
   },
   mixins: [pageTemplateMixin],
   computed: {
+    pageHeaderContent() {
+      if (!this.firstMessage) return null
+      return {
+        heading: this.firstMessage.title || this.firstMessage.heading || '',
+        lead:
+          this.firstMessage.shortDescription || this.firstMessage.summary || '',
+        callsToAction: this.firstMessage.callsToAction || [],
+      }
+    },
     wayFindingPrimaryMessages() {
-      // wayfinding page
-      return (
-        this.messages
-          // Remove the first message, limit
-          .slice(
-            1,
-            Math.min(this.messages.length, this.primaryMessageLimit + 1)
-          )
-      )
+      return this.messages.slice(1, this.primaryMessageLimit + 1)
     },
   },
   methods: {
@@ -216,68 +163,48 @@ export default {
 
 <style lang="scss">
 @use '../../../design/template-stack' as *;
+
 .asd20-template-campus {
   @include typography;
   @include template;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  flex-shrink: 0;
-  overflow: hidden;
-  margin-top: space(2.25);
-  margin-top: 0;
-  #campus-header .logoContainer {
-    display: none;
-  }
-}
-
-@media (min-width: 1024px) {
-  .asd20-template-campus {
-    @include template-desktop;
-    // margin-left: space(3);
-    margin-top: 0;
-    #campus-header .logoContainer {
-      display: flex;
-      .optionalLogo {
-        max-width: 12rem;
-        max-height: 6rem;
-        margin-left: space(2);
-      }
+  min-width: 0;
+  overflow: clip;
+  background: var(--website-page__background-color, #fff);
+
+  .logoContainer {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    a {
+      display: inline-flex;
     }
-    .asd20-page-content {
-      margin-top: space(1);
+    .optionalLogo {
+      display: block;
+      max-width: 8rem;
+      max-height: 3.5rem;
+      object-fit: contain;
     }
   }
 
-  .asd20-template-campus #campus-header .asd20-campus-header__image {
-    grid-column: 1 / -1;
-    justify-self: center;
-    width: 90%;
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 0;
-  }
-
-  .asd20-template-campus #campus-header .asd20-campus-header__image > div {
+  > main {
     min-width: 0;
-    height: 100%;
-    border-right: 5px solid var(--website-header__background-color);
   }
-
-  .asd20-template-campus
-    #campus-header
-    .asd20-campus-header__image
-    > div:last-child {
-    border-right: none;
+  .asd20-page-content {
+    margin-block: clamp(1.5rem, 3vw, 3rem);
   }
+}
 
-  .asd20-template-campus #campus-header .asd20-campus-header__image > div img {
-    width: 100%;
-    height: 100%;
-    aspect-ratio: 4 / 3;
-    object-fit: cover;
-    object-position: center;
-    display: block;
+@media (min-width: 1024px) {
+  .asd20-template-campus {
+    @include template-desktop;
+    .logoContainer .optionalLogo {
+      max-width: 12rem;
+      max-height: 5rem;
+    }
   }
 }
 </style>