From da6d10e70a1592dc9d2ffdca7ecc53c4ed2f4c10 Mon Sep 17 00:00:00 2001
From: Scott Williams <5209283+scott-williams-az@users.noreply.github.com>
Date: Tue, 3 Feb 2026 17:27:53 -0700
Subject: [PATCH] wip

---
 .../components/controls/controls-helpers.js   |   7 +-
 .../app-webdir-ui/src/QuickLinks/index.js     |   1 -
 .../src/components/Contact/index.js           |   7 +-
 .../src/components/Social/index.js            |   8 +-
 .../.storybook/main.js                        |  22 +
 .../.storybook/preview-head.html              |  20 +
 .../src/footer/components/Social/index.js     |  20 +-
 .../NavbarContainer/DropdownItem/index.js     |  90 +-
 .../DropdownItem/index.styles.js              |  74 +-
 .../src/header/core/utils/data-mock.js        | 809 ++++++++++++++++--
 .../CardArrangement.stories.jsx               |  36 +-
 .../CardArrangement/CardArrangement.test.jsx  |  51 +-
 12 files changed, 1009 insertions(+), 136 deletions(-)

diff --git a/packages/app-rfi/src/components/controls/controls-helpers.js b/packages/app-rfi/src/components/controls/controls-helpers.js
index 60f8e18060..6c80e4e423 100644
--- a/packages/app-rfi/src/components/controls/controls-helpers.js
+++ b/packages/app-rfi/src/components/controls/controls-helpers.js
@@ -15,7 +15,12 @@ const GaEventPropTypes = {
   text: PropTypes.string,
 };
 
-const RfiLabel = ({ label, name, id = undefined, requiredIcon = undefined }) => (
+const RfiLabel = ({
+  label,
+  name,
+  id = undefined,
+  requiredIcon = undefined,
+}) => (
   <label htmlFor={id || name}>
     {requiredIcon && (
       <>
diff --git a/packages/app-webdir-ui/src/QuickLinks/index.js b/packages/app-webdir-ui/src/QuickLinks/index.js
index 8b62b280bd..e66ef78c71 100644
--- a/packages/app-webdir-ui/src/QuickLinks/index.js
+++ b/packages/app-webdir-ui/src/QuickLinks/index.js
@@ -32,4 +32,3 @@ const QuickLinks = () => {
 };
 
 export { QuickLinks };
-
diff --git a/packages/component-footer/src/components/Contact/index.js b/packages/component-footer/src/components/Contact/index.js
index ac2c339728..61eaf75a68 100644
--- a/packages/component-footer/src/components/Contact/index.js
+++ b/packages/component-footer/src/components/Contact/index.js
@@ -11,7 +11,12 @@ import { ColumnSection } from "../ColumnSection";
  */
 
 const Contact = ({
-  contact: { title = "", contactLink = "", contributionLink = "", columns = []},
+  contact: {
+    title = "",
+    contactLink = "",
+    contributionLink = "",
+    columns = [],
+  },
 }) => {
   return (
     <div className="wrapper" id="wrapper-footer-columns" data-testid="contact">
diff --git a/packages/component-footer/src/components/Social/index.js b/packages/component-footer/src/components/Social/index.js
index 68a6a808ff..89f92b4d9b 100644
--- a/packages/component-footer/src/components/Social/index.js
+++ b/packages/component-footer/src/components/Social/index.js
@@ -36,11 +36,9 @@ const DEF_MEDIA_LINKS = {
  * @returns {JSX.Element}
  */
 
-const Social = ({ social: {
-  logoUrl,
-  unitLogo = endorsedLogo,
-  mediaLinks = DEF_MEDIA_LINKS,
-}, }) => {
+const Social = ({
+  social: { logoUrl, unitLogo = endorsedLogo, mediaLinks = DEF_MEDIA_LINKS },
+}) => {
   return (
     <div className="wrapper" id="wrapper-endorsed-footer" data-testid="social">
       <div className="container" id="endorsed-footer">
diff --git a/packages/component-header-footer/.storybook/main.js b/packages/component-header-footer/.storybook/main.js
index 13e1ac928f..53cbeec71e 100644
--- a/packages/component-header-footer/.storybook/main.js
+++ b/packages/component-header-footer/.storybook/main.js
@@ -14,6 +14,28 @@ const config = {
   framework: {
     name: "@storybook/react-vite",
   },
+  async viteFinal(config) {
+    // Configure optimizeDeps to handle JSX in .js files
+    config.optimizeDeps = {
+      ...config.optimizeDeps,
+      esbuildOptions: {
+        ...config.optimizeDeps?.esbuildOptions,
+        loader: {
+          '.js': 'jsx',
+          '.jsx': 'jsx',
+        },
+      },
+    };
+
+    // Configure esbuild for build
+    config.esbuild = {
+      ...config.esbuild,
+      loader: 'jsx',
+      include: /\.(jsx?|tsx?)$/,
+    };
+
+    return config;
+  },
 };
 
 export default config;
diff --git a/packages/component-header-footer/.storybook/preview-head.html b/packages/component-header-footer/.storybook/preview-head.html
index 5732dacc3a..f05141cc36 100644
--- a/packages/component-header-footer/.storybook/preview-head.html
+++ b/packages/component-header-footer/.storybook/preview-head.html
@@ -35,3 +35,23 @@
     gap: 0rem!important;
   }
 </style>
+
+<!-- Trap clicked links and open them in a hidden iframe to prevent Storybook from navigating away -->
+<script>
+  setTimeout(function () {
+    var t = "capturelinks";
+    var b = document.getElementsByTagName("base")[0];
+    b.target = t;
+    var f = document.createElement("iframe");
+    f.name = t;
+    f.height = 0;
+    f.width = 0;
+    f.style.display = "none";
+    f.style.visibility = "hidden";
+    document.body.appendChild(f);
+  },1);
+</script>
+
+
+<!-- <base target="capturelinks">
+<iframe name="capturelinks" height="0" width="0" style="display: none; visibility: hidden"></iframe> -->
diff --git a/packages/component-header-footer/src/footer/components/Social/index.js b/packages/component-header-footer/src/footer/components/Social/index.js
index a5b34ffc54..35ce4368a5 100644
--- a/packages/component-header-footer/src/footer/components/Social/index.js
+++ b/packages/component-header-footer/src/footer/components/Social/index.js
@@ -28,13 +28,19 @@ const DEFAULT_GA_EVENT = {
  * @returns {JSX.Element}
  */
 
-const Social = ({ social: { logoUrl, unitLogo = endorsedLogo, mediaLinks = {
-  facebook: "",
-  twitter: "",
-  linkedIn: "",
-  instagram: "",
-  youtube: "",
-} } }) => {
+const Social = ({
+  social: {
+    logoUrl,
+    unitLogo = endorsedLogo,
+    mediaLinks = {
+      facebook: "",
+      twitter: "",
+      linkedIn: "",
+      instagram: "",
+      youtube: "",
+    },
+  },
+}) => {
   return (
     <div className="wrapper" id="wrapper-endorsed-footer" data-testid="social">
       <div className="container" id="endorsed-footer">
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
index 4e905c6f32..53e04bbfe5 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.js
@@ -25,14 +25,14 @@ HeadingItem.propTypes = {
 };
 
 const ButtonItem = ({ link, dropdownName, handleLinkEvent }) => (
-  <li className="nav-button">
+  <div className="nav-button">
     <Button
       text={link.text}
-      color={link.color || "dark"}
+      color={link.color || "maroon"}
       href={link.href}
       onClick={e => handleLinkEvent(e, link)}
     />
-  </li>
+  </div>
 );
 
 ButtonItem.propTypes = {
@@ -94,7 +94,13 @@ const DropdownItem = ({
   parentLink,
 }) => {
   const { breakpoint } = useAppContext();
-  const isMega = items?.length > 2;
+
+  let cols = 0;
+  items.map(lists => {
+    cols += lists[0].span || 1;
+  });
+
+  const isMega = cols > 2;
   /**
    * @type {React.MutableRefObject<HTMLDivElement|null>}
    */
@@ -103,6 +109,7 @@ const DropdownItem = ({
   const MULTIPLE_SUBMENUS = items?.length > 1;
 
   useEffect(() => {
+    console.log(dropdownRef.current);
     if (window && dropdownRef.current) {
       const elPosition = dropdownRef?.current?.getBoundingClientRect().left;
       const breakpointPosition = window.innerWidth * 0.55;
@@ -144,7 +151,7 @@ const DropdownItem = ({
   };
 
   const renderItem = (link, index) => {
-    const key = `${link.text}-${link.href || index}`;
+    const key = `${link.text}-${link.href}-${index}`;
     if (link.type === "heading")
       return <HeadingItem key={key} text={link.text} />;
     if (link.type === "button")
@@ -166,6 +173,7 @@ const DropdownItem = ({
     );
   };
 
+  console.log("TOTAL COLS: ", cols);
   return (
     <DropdownWrapper
       ref={dropdownRef}
@@ -174,8 +182,13 @@ const DropdownItem = ({
       }`}
       breakpoint={breakpoint}
     >
-      <div id={MULTIPLE_SUBMENUS ? listId : ""} className="dropdown-container">
-        {items?.map((item, index0) => {
+      <div
+        style={{ "--cols": cols < 3 ? 4 : cols }}
+        id={MULTIPLE_SUBMENUS ? listId : ""}
+        className="dropdown-container"
+      >
+        {/*
+                {items?.map((item, index0) => {
           const genKey = idGenerator(`dropdown-item-${index0}-`);
           const key = genKey.next().value;
           return (
@@ -184,6 +197,69 @@ const DropdownItem = ({
             </ul>
           );
         })}
+
+ */}
+
+        <>
+          {
+            // console.log(items)
+          }
+          {items?.map((item, index0) => {
+            console.log(item);
+            const genKey = idGenerator(`dropdown-item-${index0}-`);
+            const key = genKey.next().value;
+            return (
+              <div
+                className="dropdown-container-column"
+                style={{ "--span": item[0].span || 1 }}
+                key={`${listId}-${key}`}
+                id={MULTIPLE_SUBMENUS ? `${listId}-${key}` : listId}
+              >
+                {(() => {
+                  let currentUl = [];
+                  const uls = [];
+                  item.forEach((link, index) => {
+                    if (link.type === "heading") {
+                      if (currentUl.length > 0) {
+                        uls.push(currentUl);
+                        currentUl = [];
+                      }
+                      uls.push([link]);
+                    } else if (link.type === "button") {
+                      if (currentUl.length > 0) {
+                        uls.push(currentUl);
+                        currentUl = [];
+                      }
+                      uls.push([link]);
+                    } else {
+                      currentUl.push(link);
+                    }
+                  });
+
+                  if (currentUl.length > 0) {
+                    uls.push(currentUl);
+                  }
+                  console.log(uls);
+
+                  return uls.map((group, groupIndex) => {
+                    const groupKey = `${key}-group-${groupIndex}`;
+                    if (group.length === 1 && group[0].type === "heading") {
+                      return renderItem(group[0], groupIndex);
+                    }
+                    if (group.length === 1 && group[0].type === "button") {
+                      return renderItem(group[0], groupIndex);
+                    }
+                    return (
+                      <ul key={groupKey}>
+                        {group.map((link, index) => renderItem(link, index))}
+                      </ul>
+                    );
+                  });
+                })()}
+              </div>
+            );
+          })}
+        </>
       </div>
       {buttons && (
         <div className="dropdown-button-container">
diff --git a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js
index fca47eb8b7..ca352c5354 100644
--- a/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js
+++ b/packages/component-header-footer/src/header/components/HeaderMain/NavbarContainer/DropdownItem/index.styles.js
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 const DropdownWrapper = styled.div`
+  --gap: 2rem;
   position: fixed;
   background-color: #ffffff;
   border: 1px solid #d0d0d0;
@@ -12,9 +13,8 @@ const DropdownWrapper = styled.div`
     visibility: visible;
   }
   &.mega {
-    width: 100%;
-    left: 0;
-    margin-left: 0 !important;
+    width: 1200px;
+    left: calc((100% - 1200px) / 2);
   }
   &.aligned-right:not(.mega) {
     position: absolute;
@@ -24,30 +24,51 @@ const DropdownWrapper = styled.div`
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
-    justify-content: center;
-    padding: 2rem;
-    ul {
-      width: 16rem;
-      max-width: 282px;
+    justify-content: stretch;
+
+    .dropdown-container-column {
+      width: calc(1200px / var(--cols, 1) * var(--span, 1));
+      padding: var(--gap);
       display: flex;
       flex-direction: column;
+      justify-content: flex-start;
+      row-gap: var(--gap);
+
       &:not(:last-child) {
-        padding-right: 2rem;
-        margin-right: 2rem;
+        // box-shadow: -1px 0px 0px 0px #d0d0d0 inset;
         border-right: 1px solid #d0d0d0;
       }
-      .ul-heading {
-        margin-top: 0;
-        font-size: 1.5rem;
-        letter-spacing: -0.035em;
-        font-weight: 700;
-        text-align: left;
-        opacity: 1;
-        margin: 1rem 0;
-        line-height: calc(100% + 0.12em);
+    }
+
+    .ul-heading {
+      font-size: 1.5rem;
+      letter-spacing: -0.035em;
+      font-weight: 700;
+      text-align: left;
+      opacity: 1;
+      margin: 0;
+      margin-bottom: -1.5rem;
+      line-height: calc(100% + 0.12em);
+    }
+    ul {
+      --ul-gap: 1rem;
+      &:is(:last-child) {
+        flex-grow: 0;
       }
+      margin: 0;
+      width: calc(1200px / var(--cols, 1) * var(--span, 1) - var(--gap) * 2);
+      // max-width: 282px;
+      display: flex;
+      flex-direction: row;
+      column-gap: var(--ul-gap);
+      flex-wrap: wrap;
       .nav-link {
         padding: 0;
+
+        flex-basis: calc(
+          (100% / var(--span, 1)) - var(--ul-gap) * (var(--span, 1) - 1) /
+            var(--span, 1)
+        );
         a {
           width: 100%;
           display: inline-block;
@@ -61,8 +82,9 @@ const DropdownWrapper = styled.div`
           }
         }
         & + .nav-button {
+          width: 100%;
           margin-top: auto;
-          padding-top: 2rem;
+          padding-top: var(--gap);
           & + .nav-button {
             margin-top: 1rem;
           }
@@ -70,15 +92,23 @@ const DropdownWrapper = styled.div`
       }
     }
   }
+
+  .nav-button {
+    flex: 1 1;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+    width: fit-content;
+  }
   .dropdown-button-container {
     border-top: 1px solid #d0d0d0;
     border-bottom: 1px solid #d0d0d0;
-    margin-top: 1rem;
     > div {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
-      padding: 1rem 0;
+      padding: 1rem 2rem;
     }
   }
   @media (max-width: ${({ breakpoint }) => breakpoint}) {
diff --git a/packages/component-header-footer/src/header/core/utils/data-mock.js b/packages/component-header-footer/src/header/core/utils/data-mock.js
index 7f996155c4..1c91e3e96c 100644
--- a/packages/component-header-footer/src/header/core/utils/data-mock.js
+++ b/packages/component-header-footer/src/header/core/utils/data-mock.js
@@ -334,7 +334,7 @@ const navTreeMega = [
     href: "#",
   },
   {
-    text: "Link option 2",
+    text: "Col1",
     href: "/",
     items: [
       [
@@ -370,7 +370,7 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 3",
+    text: "Col2",
     href: "/",
     items: [
       [
@@ -434,7 +434,7 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 4",
+    text: "Col3",
     href: "#",
     items: [
       [
@@ -530,7 +530,7 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 5",
+    text: "A",
     href: "#",
     items: [
       [
@@ -599,6 +599,7 @@ const navTreeMega = [
           href: "https://asuonline.asu.edu/",
           type: "heading",
           text: "Column three",
+          span: 3,
         },
         {
           classes: "border first",
@@ -618,16 +619,106 @@ const navTreeMega = [
           text: "Polytechnic",
         },
         {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Another Button",
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
         },
-      ],
-      [
         {
-          href: "https://asuonline.asu.edu/",
-          type: "heading",
-          text: "Column four",
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
         },
         {
           classes: "border first",
@@ -655,20 +746,8 @@ const navTreeMega = [
     ],
   },
   {
-    text: "Link option 6",
+    text: "B",
     href: "#",
-    buttons: [
-      {
-        text: "CTA One",
-        href: "https://asu.edu",
-        color: "maroon",
-      },
-      {
-        text: "CTA Two",
-        href: "https://asu.edu",
-        color: "gold",
-      },
-    ],
     items: [
       [
         {
@@ -678,7 +757,7 @@ const navTreeMega = [
         },
         {
           href: "https://havasu.asu.edu/",
-          text: "The Lake Havasu Campus",
+          text: "Lake Havasu",
         },
         {
           href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
@@ -701,13 +780,6 @@ const navTreeMega = [
           href: "https://wpcarey.asu.edu/mba/china-program/english/",
           text: "China",
         },
-        {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Call to Action",
-        },
-      ],
-      [
         {
           href: "https://asuonline.asu.edu/",
           type: "heading",
@@ -733,7 +805,7 @@ const navTreeMega = [
         {
           href: "https://campus.asu.edu/downtown/",
           type: "button",
-          text: "Action Button",
+          text: "Action",
         },
       ],
       [
@@ -741,6 +813,7 @@ const navTreeMega = [
           href: "https://asuonline.asu.edu/",
           type: "heading",
           text: "Column three",
+          span: 3,
         },
         {
           classes: "border first",
@@ -760,16 +833,38 @@ const navTreeMega = [
           text: "Polytechnic",
         },
         {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Another Button",
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
         },
-      ],
-      [
         {
-          href: "https://asuonline.asu.edu/",
-          type: "heading",
-          text: "Column four",
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
         },
         {
           classes: "border first",
@@ -789,30 +884,636 @@ const navTreeMega = [
           text: "Some longer text office of longtext",
         },
         {
-          href: "https://campus.asu.edu/downtown/",
-          type: "button",
-          text: "Downtown Phoenix",
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
         },
-      ],
-      [
         {
-          href: "https://asuonline.asu.edu/",
-          type: "heading",
-          text: "Column Five",
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
         },
         {
           classes: "border first",
           href: "https://www.asu.edu/map/",
-          text: "Buildings and directory",
+          text: "Maps and Directions",
         },
         {
           href: "https://campus.asu.edu/tempe/",
-          text: "Some good news",
+          text: "Office of the technology",
         },
         {
           href: "https://campus.asu.edu/west/",
-          selected: true,
-          text: "Directory Admin Tools",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Downtown Phoenix",
+        },
+      ],
+    ],
+  },
+  {
+    text: "C",
+    href: "#",
+    buttons: [
+      {
+        text: "CTA One",
+        href: "https://asu.edu",
+        color: "maroon",
+      },
+      {
+        text: "CTA Two",
+        href: "https://asu.edu",
+        color: "gold",
+      },
+    ],
+    items: [
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu One - span 2",
+          span: 2,
+        },
+        {
+          href: "https://havasu.asu.edu/",
+          text: "The Lake Havasu Campus",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Two - type header, in same array - inherits span",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "Faculty and Staff Directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "The Tempe Campus",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Sun Devils and Things",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Another nav link",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Action Button",
+        },
+      ],
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu three - new array = new column",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Another Button",
+        },
+      ],
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Four - new array = new column",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          // type: "button",
+          text: "Downtown Phoenix",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Column Five",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Buildings and directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Some good news",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          selected: true,
+          text: "Directory Admin Tools",
+        },
+      ],
+    ],
+  },
+
+  {
+    text: "D",
+    href: "#",
+    buttons: [
+      {
+        text: "CTA One",
+        href: "https://asu.edu",
+        color: "maroon",
+      },
+      {
+        text: "CTA Two",
+        href: "https://asu.edu",
+        color: "gold",
+      },
+    ],
+    items: [
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu One - span 2",
+          span: 2,
+        },
+        {
+          href: "https://havasu.asu.edu/",
+          text: "The Lake Havasu Campus",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Two - type header, in same array - inherits span",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "Faculty and Staff Directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "The Tempe Campus",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Sun Devils and Things",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Another nav link",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          type: "button",
+          text: "Action Button",
+        },
+      ],
+      [
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu three - span 3",
+          span: 3,
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://www.asu.edu/map/",
+          text: "University Technology Office",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Sun Devil Football",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "The School of Something",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Polytechnic",
+        },
+        {
+          href: "https://asuonline.asu.edu/",
+          type: "heading",
+          text: "Menu Four",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Maps and Directions",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Office of the technology",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          text: "Office of the business",
+        },
+        {
+          href: "https://campus.asu.edu/polytechnic/",
+          text: "Some longer text office of longtext",
+        },
+        {
+          href: "https://campus.asu.edu/downtown/",
+          // type: "button",
+          text: "Downtown Phoenix",
+        },
+        {
+          classes: "border first",
+          href: "https://www.asu.edu/map/",
+          text: "Buildings and directory",
+        },
+        {
+          href: "https://campus.asu.edu/tempe/",
+          text: "Some good news",
+        },
+        {
+          href: "https://campus.asu.edu/west/",
+          selected: true,
+          text: "Directory Admin Tools",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+        {
+          href: "https://asuresearchpark.com/",
+          text: "Research Park",
+        },
+        {
+          href: "https://washingtoncenter.asu.edu/",
+          text: "Washington D.C.",
+        },
+        {
+          href: "https://www.thunderbird.edu/about-thunderbird/locations/phoenix-arizona",
+          classes: "border",
+          text: "Thunderbird",
+        },
+        {
+          href: "https://skysong.asu.edu/",
+          text: "Skysong",
+        },
+      ],
+    ],
+  },
+
+  {
+    text: "Col1",
+    href: "/",
+    items: [
+      [
+        {
+          href: "https://www.asu.edu/",
+          text: "A test navigation item",
+        },
+        {
+          href: "https://www.asu.edu/",
+          text: "Mauris viverra, sem nec",
+        },
+        {
+          href: "https://www.asu.edu/?feature=athletics",
+          text: "Massa nunc dictum nam venenatis",
+        },
+        {
+          href: "https://www.asu.edu/?feature=alumni",
+          text: "Alumni",
+        },
+        {
+          href: "https://www.asu.edu/?feature=giving",
+          text: "Giving",
+        },
+        {
+          href: "https://www.asu.edu/?feature=president",
+          text: "President",
+        },
+        {
+          href: "https://www.asu.edu/about",
+          text: "About ASU",
+        },
+      ],
+    ],
+  },
+  {
+    text: "Col2",
+    href: "/",
+    items: [
+      [
+        {
+          type: "heading",
+          text: "Column One",
+        },
+        {
+          href: "https://www.asu.edu/",
+          text: "Pellentesque ornare",
+        },
+        {
+          href: "https://www.asu.edu/",
+          text: "Curabitur viverra arcu nisl",
+        },
+        {
+          href: "https://www.asu.edu/?feature=athletics",
+          text: "Aenean pharetra",
+        },
+        {
+          href: "https://www.asu.edu/?feature=alumni",
+          text: "Pellentesque",
+        },
+        {
+          href: "https://www.asu.edu/?feature=giving",
+          text: "Donec sagittis nulla",
+        },
+        {
+          href: "https://www.asu.edu/?feature=president",
+          text: "Quisque fringilla",
+        },
+        {
+          href: "https://www.asu.edu/about",
+          text: "Integer vel gravida lectus",
+        },
+      ],
+      [
+        {
+          href: "https://www.asu.edu/?feature=newsevents",
+          type: "heading",
+          text: "Column two",
+        },
+        {
+          href: "https://www.asu.edu/?feature=academics",
+          text: "Nunc in libero odio",
+        },
+        {
+          href: "https://www.asu.edu/?feature=research",
+          text: "Maecenas quam elit",
+        },
+        {
+          href: "https://www.asu.edu/?feature=academics",
+          text: "Ut at vehicula neque",
+        },
+        {
+          href: "https://www.asu.edu/?feature=athletics",
+          type: "button",
+          text: "Sed molestie",
         },
       ],
     ],
diff --git a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx
index 124dbc8d95..fafce40961 100644
--- a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx
+++ b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx
@@ -261,19 +261,19 @@ Example with four degree cards that will wrap based on available space.
 export const HorizontalCards = Template.bind({});
 HorizontalCards.args = {
   cards: [
-      {
-        type: "default",
-        title: "Horizontal",
-        body: "Body",
-        horizontal: true,
-      },
-      {
-        type: "default",
-        title: "Horizontal",
-        body: "Body",
-        horizontal: true,
-      },
-    ],
+    {
+      type: "default",
+      title: "Horizontal",
+      body: "Body",
+      horizontal: true,
+    },
+    {
+      type: "default",
+      title: "Horizontal",
+      body: "Body",
+      horizontal: true,
+    },
+  ],
 };
 HorizontalCards.storyName = "Horizontal cards example";
 HorizontalCards.parameters = {
@@ -361,7 +361,8 @@ MixedCardTypesNoColProvided.args = {
     },
   ],
 };
-MixedCardTypesNoColProvided.storyName = "Mixed card types (no columns specified)";
+MixedCardTypesNoColProvided.storyName =
+  "Mixed card types (no columns specified)";
 MixedCardTypesNoColProvided.parameters = {
   docs: {
     description: {
@@ -468,7 +469,8 @@ const rankingCardsLarge = [
     heading: "Sustainability Excellence",
     body: "Leading the way in sustainable practices and environmental initiatives.",
     readMoreLink: "#",
-  },{
+  },
+  {
     imageSize: "large",
     image: img1,
     imageAlt: "Ranking image 1",
@@ -533,7 +535,7 @@ export const RankingCardsLarge = Template.bind({});
 RankingCardsLarge.args = {
   cards: rankingCardsLarge,
   cardType: "ranking",
-  columns: 4
+  columns: 4,
 };
 RankingCardsLarge.storyName = "Ranking cards (large)";
 RankingCardsLarge.parameters = {
@@ -557,7 +559,7 @@ export const RankingCardsSmall = Template.bind({});
 RankingCardsSmall.args = {
   cards: rankingCardsSmall,
   cardType: "ranking",
-  columns: 2
+  columns: 2,
 };
 RankingCardsSmall.storyName = "Ranking cards (small)";
 RankingCardsSmall.parameters = {
diff --git a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.test.jsx b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.test.jsx
index 948ced3870..447a421791 100644
--- a/packages/unity-react-core/src/components/CardArrangement/CardArrangement.test.jsx
+++ b/packages/unity-react-core/src/components/CardArrangement/CardArrangement.test.jsx
@@ -41,23 +41,29 @@ describe("CardArrangement", () => {
     expect(cardItems).toHaveLength(3);
   });
 
-    it("should apply correct column classes based on columns prop", () => {
+  it("should apply correct column classes based on columns prop", () => {
     const { getAllByTestId: get2Cols, unmount: unmount2 } = render(
       <CardArrangement cards={mockCards} columns={2} />
     );
-    expect(get2Cols("uds-card-arrangement-content-container")[0].className).toContain("col-12 col-md-6");
+    expect(
+      get2Cols("uds-card-arrangement-content-container")[0].className
+    ).toContain("col-12 col-md-6");
     unmount2();
 
     const { getAllByTestId: get3Cols, unmount: unmount3 } = render(
       <CardArrangement cards={mockCards} columns={3} />
     );
-    expect(get3Cols("uds-card-arrangement-content-container")[0].className).toContain("col-12 col-md-6 col-lg-4");
+    expect(
+      get3Cols("uds-card-arrangement-content-container")[0].className
+    ).toContain("col-12 col-md-6 col-lg-4");
     unmount3();
 
     const { getAllByTestId: get4Cols, unmount: unmount4 } = render(
       <CardArrangement cards={mockCards} columns={4} />
     );
-    expect(get4Cols("uds-card-arrangement-content-container")[0].className).toContain("col-12 col-md-6 col-lg-4 col-xl-3");
+    expect(
+      get4Cols("uds-card-arrangement-content-container")[0].className
+    ).toContain("col-12 col-md-6 col-lg-4 col-xl-3");
     unmount4();
 
     const horizontalCards = [
@@ -77,7 +83,9 @@ describe("CardArrangement", () => {
     const { getAllByTestId: getHorizontal } = render(
       <CardArrangement cards={horizontalCards} columns={3} />
     );
-    expect(getHorizontal("uds-card-arrangement-content-container")[0].className).toContain("col-12 col-md-6");
+    expect(
+      getHorizontal("uds-card-arrangement-content-container")[0].className
+    ).toContain("col-12 col-md-6");
   });
 
   it("should render cards with correct titles", () => {
@@ -140,21 +148,22 @@ describe("CardArrangement", () => {
   });
 
   it("should pass through card props correctly", () => {
-    const cardsWithButtons = /** @type {import('./CardArrangement').CardArrangementProps['cards']} */ ([
-      {
-        type: "default",
-        title: "Card with Button",
-        body: "Body content",
-        buttons: [
-          {
-            color: /** @type {"maroon"} */ ("maroon"),
-            size: /** @type {"default"} */ ("default"),
-            label: "Click me",
-            href: "#",
-          },
-        ],
-      },
-    ]);
+    const cardsWithButtons =
+      /** @type {import('./CardArrangement').CardArrangementProps['cards']} */ ([
+        {
+          type: "default",
+          title: "Card with Button",
+          body: "Body content",
+          buttons: [
+            {
+              color: /** @type {"maroon"} */ ("maroon"),
+              size: /** @type {"default"} */ ("default"),
+              label: "Click me",
+              href: "#",
+            },
+          ],
+        },
+      ]);
 
     const { getByTestId } = render(
       <CardArrangement cards={cardsWithButtons} />
@@ -220,7 +229,7 @@ describe("CardArrangement", () => {
     cardItems.forEach(cardItem => {
       const directChild = cardItem.firstElementChild;
       expect(directChild).toBeDefined();
-      expect(directChild.className).toContain('card-ranking');
+      expect(directChild.className).toContain("card-ranking");
     });
   });