From a5a823e3c2fe6cfd66bfe77b8172dca22a91d849 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Wed, 18 Mar 2026 17:02:58 -0700
Subject: [PATCH 1/6] feat(unity-react-core): update event and news cards

---
 .../src/components/Card/Card.jsx              | 92 ++++++++++++-------
 .../src/components/Card/Card.stories.jsx      | 61 +++++++-----
 2 files changed, 99 insertions(+), 54 deletions(-)

diff --git a/packages/unity-react-core/src/components/Card/Card.jsx b/packages/unity-react-core/src/components/Card/Card.jsx
index 990516f3fe..b612114cbd 100644
--- a/packages/unity-react-core/src/components/Card/Card.jsx
+++ b/packages/unity-react-core/src/components/Card/Card.jsx
@@ -188,14 +188,24 @@ const BaseCard = ({
   return (
     <>
       <CardWrapper className={cardClass} data-testid="card-container">
-        {!!image && (
+        {type === "event" || type === "news" ? (
+          !!image && (
+            <Image
+              src={image}
+              alt={imageAltText}
+              dataTestId="card-image"
+              cssClasses={["card-img-top"]}
+              title={title}
+            />
+          )
+        ) : (
           <Image
-            src={image}
             alt={imageAltText}
             dataTestId="card-image"
             cssClasses={["card-img-top"]}
-            cardLink={cardLink}
             title={title}
+            cardLink={cardLink}
+            src={image}
           />
         )}
         {!image && icon && (
@@ -313,42 +323,62 @@ const CardContent = ({
         eventLocation={eventLocation}
       />
     )}
-    {buttons && (
-      <div className="card-buttons">
-        {buttons.map(button => (
-          <div
-            className="card-button"
-            data-testid="card-button"
-            key={`${button.label}-${button.href}`}
-          >
-            {/* @ts-ignore */}
-            <Button
-              ariaLabel={button.ariaLabel}
-              color={button.color}
-              icon={button.icon}
-              href={button.href}
-              label={button.label}
-              onClick={button.onClick}
-              size={button.size}
-              target={button.target}
-              cardTitle={title}
-            />
-          </div>
-        ))}
-      </div>
-    )}
-    {linkUrl && linkLabel && (
+    {(type === "event" || type === "news") && cardLink ? (
       <div className="card-link" data-testid="card-link">
         <GaEventWrapper
           gaData={{
             ...gaDefaultObject,
-            section: title,
-            text: linkLabel,
+            text: title,
           }}
         >
-          <a href={emailAddressParser(linkUrl)}>{linkLabel}</a>
+          <a
+            href={cardLink}
+            className="card-arrow-link"
+            aria-label={title}
+          >
+            <i className="fas fa-arrow-right" aria-hidden="true" />
+          </a>
         </GaEventWrapper>
       </div>
+    ) : (
+      <>
+        {buttons && (
+          <div className="card-buttons">
+            {buttons.map(button => (
+              <div
+                className="card-button"
+                data-testid="card-button"
+                key={`${button.label}-${button.href}`}
+              >
+                <Button
+                  ariaLabel={button.ariaLabel}
+                  color={button.color}
+                  icon={button.icon}
+                  href={button.href}
+                  label={button.label}
+                  onClick={button.onClick}
+                  size={button.size}
+                  target={button.target}
+                  cardTitle={title}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+        {linkUrl && linkLabel && (
+          <div className="card-link" data-testid="card-link">
+            <GaEventWrapper
+              gaData={{
+                ...gaDefaultObject,
+                section: title,
+                text: linkLabel,
+              }}
+            >
+              <a href={emailAddressParser(linkUrl)}>{linkLabel}</a>
+            </GaEventWrapper>
+          </div>
+        )}
+      </>
     )}
     {tags && (
       <div className="card-tags" data-testid="card-tags">
diff --git a/packages/unity-react-core/src/components/Card/Card.stories.jsx b/packages/unity-react-core/src/components/Card/Card.stories.jsx
index 7d257a5199..a52be1f75a 100644
--- a/packages/unity-react-core/src/components/Card/Card.stories.jsx
+++ b/packages/unity-react-core/src/components/Card/Card.stories.jsx
@@ -132,49 +132,64 @@ Event.args = {
   horizontal: false,
   image: img1,
   imageAltText: "An example image",
-  title:
-    "Event title Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore exercitationem ad voluptatem dolore dolores nulla ipsam quo distinctio expedita doloribus nisi similique obcaecati velit illo autem numquam iusto, rem nesciunt repellendus laborum. Rerum quisquam, soluta aspernatur a harum dolor ducimus nulla. Itaque aliquam cum fugiat error esse ipsam rerum consectetur!",
+  title: "Sun Devil Women's Tennis: NCAA Singles and Doubles Championships",
   cardLink: "#example-link",
-  body: "<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo.",
   eventFormat: "stack",
-  eventTime: "Wed, November 21st, 2021<br />11:30 a.m - 12:30 p.m.",
+  eventTime: "Wed, November 21st, 2021<br />11:30 a.m.\u201312:30 p.m. (MST)",
   eventLocation: "Downtown Phoenix campus",
-  buttons: [
-    {
-      color: "maroon",
-      size: "default",
-      label: "CTA button",
-    },
-  ],
 };
 Event.parameters = {
   docs: {
     description: {
       story: `
-The event props, \`eventLocation\` and \`eventTime\` are allowed to contain basic HTML formatting, primarily \`<br>\` for line breaks.
+Event cards use a single arrow link at the bottom instead of CTA buttons.
+The \`cardLink\` prop provides the destination URL.
 
+The event props \`eventLocation\` and \`eventTime\` support basic HTML like \`<br>\`.
 
     <Card
-        body="<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo."
-        buttons={[
-          {
-            color: 'maroon',
-            label: 'CTA button',
-            size: 'default'
-          }
-        ]}
+        cardLink="#example-link"
         eventFormat="stack"
         eventLocation="Downtown Phoenix campus"
-        eventTime="Wed, November 21st, 2021<br>11:30 a.m - 12:30 p.m."
-        image=img1
+        eventTime="Wed, November 21st, 2021<br>11:30 a.m.–12:30 p.m. (MST)"
+        image={img1}
         imageAltText="An example image"
-        title="Event title"
+        title="Sun Devil Women's Tennis: NCAA Singles and Doubles Championships"
         type="event"
       />`,
     },
   },
 };
 
+export const News = Template.bind({});
+News.args = {
+  type: "news",
+  horizontal: false,
+  image: img1,
+  imageAltText: "An example image",
+  title: "ASU researchers discover DNA-based electronic storage system",
+  body: "<span style='font-weight: bold;'>(Bold!) Body copy goes here.</span> Limit to 5 lines max. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua eiusmod tempo.",
+  cardLink: "#example-link",
+};
+News.parameters = {
+  docs: {
+    description: {
+      story: `
+News cards use a single arrow link at the bottom instead of CTA buttons.
+The \`cardLink\` prop provides the destination URL.
+
+    <Card
+        body="At Arizona State University's Biodesign Institute..."
+        cardLink="#example-link"
+        image={img1}
+        imageAltText="An example image"
+        title="ASU researchers discover DNA-based electronic storage system"
+        type="news"
+      />`,
+    },
+  },
+};
+
 export const Story = Template.bind({});
 Story.args = {
   type: "story",

From b3fa88a5efe1c201d1037bd40ad52ff031576a78 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Wed, 18 Mar 2026 17:03:29 -0700
Subject: [PATCH 2/6] feat(unity-bootstrap-theme): add new event and news card
 styles for links

---
 .../src/scss/extends/_cards.scss              | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
index 398f345201..bd22b258bf 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
@@ -435,6 +435,56 @@ Cards - Table of Contents
   margin-right: 8px;
 }
 
+/*
+  Arrow link CTA for event and news cards.
+  Replaces button CTAs with a single right-arrow link.
+*/
+.card-arrow-link {
+  align-items: center;
+  justify-content: center;
+  width: 2.1rem;
+  height: 2.1rem;
+  float: right;
+  color: $asu-gray-2;
+  text-decoration: none;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+
+  &:hover, &:focus, &:focus-visible, &:active {
+    box-shadow: $uds-color-base-maroon;
+    .fa-arrow-right {
+      color: $uds-color-base-maroon;
+    }
+  }
+
+  .fa-arrow-right {
+    width: .875rem;
+    height: .875rem;
+    color: $asu-gray-4;
+  }
+
+  &:hover {
+    color: $uds-color-base-maroon;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $uds-color-base-bluefocus;
+    outline-offset: 2px;
+  }
+
+  @include media-breakpoint-down(md) {
+    color: $uds-color-base-maroon;
+    border-color: $uds-color-base-maroon;
+
+    .fa-arrow-right {
+      color: inherit;
+    }
+  }
+}
+
 .card-horizontal {
   flex-direction: row;
 }

From d95a0410e2b44b7c158d59ffbe5fdc767ec10d80 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Wed, 18 Mar 2026 17:03:50 -0700
Subject: [PATCH 3/6] feat(component-events): update to new style cards with
 single links

---
 packages/component-events/README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/component-events/README.md b/packages/component-events/README.md
index 1c8624e08a..69b0a36ad8 100644
--- a/packages/component-events/README.md
+++ b/packages/component-events/README.md
@@ -3,7 +3,6 @@ ASU Web Standards-based implementation of events component.
 
 This component is the React implementation of the old D8 Events component(https://github.com/ASU-CLAS/asu-react-d8events) but reusing a lot of the components already developed in `components-core` and `component-carousel`, taking in cosideration good practises, scalability and performance.
 
-
 The job of this component is listing all the events fetched to the api url provided by the user. It also display a customizable, optional header with a title and a button.
 
 ## Architecture details

From 0730d35f4c12cea8febb5c8e7b70794ee3749128 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Wed, 18 Mar 2026 17:04:20 -0700
Subject: [PATCH 4/6] feat(component-news): update to new style cards with
 single links

---
 packages/component-news/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/component-news/README.md b/packages/component-news/README.md
index 68f6326e48..e277128e8b 100644
--- a/packages/component-news/README.md
+++ b/packages/component-news/README.md
@@ -3,6 +3,7 @@ ASU Web Standards-based implementation of news component.
 
 This component is the React implementation of the old News component(https://github.com/ASU-CLAS/asu-react-news-list) but reusing a lot of the components already developed in `components-core` and `component-carousel`, taking in cosideration good practises, scalability and performance.
 
+
 The job of this component is listing all the news fetched to the api url provided by the user. It also display a customizable, optional header with a title and a button.
 
 ## Architecture details

From 58ad7a9d48ad96820fc8495e6562bc37a53be94e Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Fri, 20 Mar 2026 13:41:09 -0700
Subject: [PATCH 5/6] chore(unity-react-core): formate Card jsx

---
 .../src/components/Card/Card.jsx              | 287 ++++++++----------
 1 file changed, 133 insertions(+), 154 deletions(-)

diff --git a/packages/unity-react-core/src/components/Card/Card.jsx b/packages/unity-react-core/src/components/Card/Card.jsx
index b612114cbd..8bdca8093c 100644
--- a/packages/unity-react-core/src/components/Card/Card.jsx
+++ b/packages/unity-react-core/src/components/Card/Card.jsx
@@ -20,6 +20,8 @@ const gaDefaultObject = {
   region: "main content",
 };
 
+const isEventOrNewsCard = (type) => type === "event" || type === "news";
+
 /**
  * @typedef {import('../../core/types/card-types').CardProps} CardProps
  */
@@ -185,68 +187,43 @@ const BaseCard = ({
     [`borderless`]: !showBorders,
   });
 
+  const shouldShowImage = isEventOrNewsCard(type) ? !!image : true;
+  const shouldIncludeCardLink = !isEventOrNewsCard(type);
+
   return (
-    <>
-      <CardWrapper className={cardClass} data-testid="card-container">
-        {type === "event" || type === "news" ? (
-          !!image && (
-            <Image
-              src={image}
-              alt={imageAltText}
-              dataTestId="card-image"
-              cssClasses={["card-img-top"]}
-              title={title}
-            />
-          )
-        ) : (
-          <Image
-            alt={imageAltText}
-            dataTestId="card-image"
-            cssClasses={["card-img-top"]}
-            title={title}
-            cardLink={cardLink}
-            src={image}
-          />
-        )}
-        {!image && icon && (
-          <i
-            className={`${icon?.[0]} fa-${icon?.[1]} fa-2x card-icon-top`}
-            data-testid="card-icon"
-          />
-        )}
-        {horizontal ? (
-          <div className="card-content-wrapper">
-            <CardContent
-              type={type}
-              body={body}
-              eventFormat={eventFormat}
-              eventLocation={eventLocation}
-              eventTime={eventTime}
-              title={title}
-              buttons={buttons}
-              linkLabel={linkLabel}
-              linkUrl={linkUrl}
-              tags={tags}
-              cardLink={cardLink}
-            />
-          </div>
-        ) : (
-          <CardContent
-            type={type}
-            body={body}
-            eventFormat={eventFormat}
-            eventLocation={eventLocation}
-            eventTime={eventTime}
-            title={title}
-            buttons={buttons}
-            linkLabel={linkLabel}
-            linkUrl={linkUrl}
-            tags={tags}
-            cardLink={cardLink}
-          />
-        )}
-      </CardWrapper>
-    </>
+    <CardWrapper className={cardClass} data-testid="card-container">
+      {shouldShowImage && (
+        <Image
+          src={image}
+          alt={imageAltText}
+          dataTestId="card-image"
+          cssClasses={["card-img-top"]}
+          title={title}
+          cardLink={shouldIncludeCardLink ? cardLink : undefined}
+        />
+      )}
+      {!image && icon && (
+        <i
+          className={`${icon?.[0]} fa-${icon?.[1]} fa-2x card-icon-top`}
+          data-testid="card-icon"
+        />
+      )}
+      <div className={horizontal ? "card-content-wrapper" : undefined}>
+        <CardContent
+          type={type}
+          body={body}
+          eventFormat={eventFormat}
+          eventLocation={eventLocation}
+          eventTime={eventTime}
+          title={title}
+          buttons={buttons}
+          linkLabel={linkLabel}
+          linkUrl={linkUrl}
+          tags={tags}
+          cardLink={cardLink}
+        />
+      </div>
+    </CardWrapper>
   );
 };
 
@@ -301,103 +278,107 @@ const CardContent = ({
   linkUrl = undefined,
   tags = undefined,
   cardLink,
-}) => (
-  <>
-    {!!title && (
+}) => {
+  const isEventOrNews = isEventOrNewsCard(type);
+  const showTitleLink = cardLink && !isEventOrNews;
+  const showArrowLink = isEventOrNews && cardLink;
+  const showEventInfo = type === "event" && (eventTime || eventLocation);
+
+  return (
+    <>
       <div className="card-header" data-testid="card-title">
         <h3 className="card-title">
-          {cardLink ? <a href={cardLink}>{title}</a> : title}
+          {showTitleLink ? <a href={cardLink}>{title}</a> : title}
         </h3>
       </div>
-    )}
-    {!!body && (
-      <div className="card-body" data-testid="card-body">
-        {}
-        <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(body)} />
-      </div>
-    )}
-    {type === "event" && (eventTime || eventLocation) && (
-      <EventInfo
-        eventFormat={eventFormat}
-        eventTime={eventTime}
-        eventLocation={eventLocation}
-      />
-    )}
-    {(type === "event" || type === "news") && cardLink ? (
-      <div className="card-link" data-testid="card-link">
-        <GaEventWrapper
-          gaData={{
-            ...gaDefaultObject,
-            text: title,
-          }}
-        >
-          <a
-            href={cardLink}
-            className="card-arrow-link"
-            aria-label={title}
+      {body && (
+        <div className="card-body" data-testid="card-body">
+          <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(body)} />
+        </div>
+      )}
+      {showEventInfo && (
+        <EventInfo
+          eventFormat={eventFormat}
+          eventTime={eventTime}
+          eventLocation={eventLocation}
+        />
+      )}
+      {showArrowLink ? (
+        <div className="card-link" data-testid="card-link">
+          <GaEventWrapper
+            gaData={{
+              ...gaDefaultObject,
+              text: title,
+            }}
           >
-            <i className="fas fa-arrow-right" aria-hidden="true" />
-          </a>
-        </GaEventWrapper>
-      </div>
-    ) : (
-      <>
-        {buttons && (
-          <div className="card-buttons">
-            {buttons.map(button => (
-              <div
-                className="card-button"
-                data-testid="card-button"
-                key={`${button.label}-${button.href}`}
-              >
-                <Button
-                  ariaLabel={button.ariaLabel}
-                  color={button.color}
-                  icon={button.icon}
-                  href={button.href}
-                  label={button.label}
-                  onClick={button.onClick}
-                  size={button.size}
-                  target={button.target}
-                  cardTitle={title}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-        {linkUrl && linkLabel && (
-          <div className="card-link" data-testid="card-link">
-            <GaEventWrapper
-              gaData={{
-                ...gaDefaultObject,
-                section: title,
-                text: linkLabel,
-              }}
+            <a
+              href={cardLink}
+              className="card-arrow-link"
+              aria-label={title}
             >
-              <a href={emailAddressParser(linkUrl)}>{linkLabel}</a>
-            </GaEventWrapper>
-          </div>
-        )}
-      </>
-    )}
-    {tags && (
-      <div className="card-tags" data-testid="card-tags">
-        {tags.map(tag => (
-          // @ts-ignore
-          <ButtonTag
-            key={`${tag.label}-${tag.href}`}
-            ariaLabel={tag.ariaLabel}
-            color={tag.color}
-            href={tag.href}
-            label={tag.label}
-            onClick={tag.onClick}
-            cardTitle={title}
-          />
-        ))}
-      </div>
-    )}
-  </>
-);
+              <i className="fas fa-arrow-right" aria-hidden="true" />
+            </a>
+          </GaEventWrapper>
+        </div>
+      ) : (
+        <>
+          {buttons && (
+            <div className="card-buttons">
+              {buttons.map(button => (
+                <div
+                  className="card-button"
+                  data-testid="card-button"
+                  key={`${button.label}-${button.href}`}
+                >
+                  <Button
+                    ariaLabel={button.ariaLabel}
+                    color={button.color}
+                    icon={button.icon}
+                    href={button.href}
+                    label={button.label}
+                    onClick={button.onClick}
+                    size={button.size}
+                    target={button.target}
+                    cardTitle={title}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+          {linkUrl && linkLabel && (
+            <div className="card-link" data-testid="card-link">
+              <GaEventWrapper
+                gaData={{
+                  ...gaDefaultObject,
+                  section: title,
+                  text: linkLabel,
+                }}
+              >
+                <a href={emailAddressParser(linkUrl)}>{linkLabel}</a>
+              </GaEventWrapper>
+            </div>
+          )}
+        </>
+      )}
+      {tags && (
+        <div className="card-tags" data-testid="card-tags">
+          {tags.map(tag => (
+            // @ts-ignore
+            <ButtonTag
+              key={`${tag.label}-${tag.href}`}
+              ariaLabel={tag.ariaLabel}
+              color={tag.color}
+              href={tag.href}
+              label={tag.label}
+              onClick={tag.onClick}
+              cardTitle={title}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+};
 
 CardContent.propTypes = {
   type: PropTypes.oneOf(["default", "degree", "event", "news", "story"]),
@@ -445,7 +426,6 @@ const EventInfo = ({
             <div>
               <i className="far fa-calendar" />
             </div>
-            {}
             <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(eventTime)} />
           </div>
         )}
@@ -472,7 +452,6 @@ const EventInfo = ({
             <div>
               <i className="far fa-calendar" />
             </div>
-            {}
             <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(eventTime)} />
           </div>
         </div>

From 04a60faac9dbfaf858b9a430e3618736d1cac165 Mon Sep 17 00:00:00 2001
From: david ornelas <davidornelas_11@hotmail.com>
Date: Fri, 20 Mar 2026 13:41:41 -0700
Subject: [PATCH 6/6] fix(unity-bootstrap-theme): event & news cards links take
 over entire card on mobile

---
 .../src/scss/extends/_cards.scss                     | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
index bd22b258bf..4d6bbc963c 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
@@ -228,6 +228,8 @@ Cards - Table of Contents
   //   }
   // }
 
+
+
 @include media-breakpoint-up(lg) {
   .col-lg-6 .card {
     .card-img-top {
@@ -479,9 +481,19 @@ Cards - Table of Contents
     color: $uds-color-base-maroon;
     border-color: $uds-color-base-maroon;
 
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
     .fa-arrow-right {
       color: inherit;
     }
+
   }
 }