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
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
diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss b/packages/unity-bootstrap-theme/src/scss/extends/_cards.scss
index 398f345201..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 {
@@ -435,6 +437,66 @@ 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;
+
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+    .fa-arrow-right {
+      color: inherit;
+    }
+
+  }
+}
+
 .card-horizontal {
   flex-direction: row;
 }
diff --git a/packages/unity-react-core/src/components/Card/Card.jsx b/packages/unity-react-core/src/components/Card/Card.jsx
index 990516f3fe..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,58 +187,43 @@ const BaseCard = ({
     [`borderless`]: !showBorders,
   });
 
+  const shouldShowImage = isEventOrNewsCard(type) ? !!image : true;
+  const shouldIncludeCardLink = !isEventOrNewsCard(type);
+
   return (
-    <>
-      <CardWrapper className={cardClass} data-testid="card-container">
-        {!!image && (
-          <Image
-            src={image}
-            alt={imageAltText}
-            dataTestId="card-image"
-            cssClasses={["card-img-top"]}
-            cardLink={cardLink}
-            title={title}
-          />
-        )}
-        {!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>
   );
 };
 
@@ -291,83 +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}
-      />
-    )}
-    {buttons && (
-      <div className="card-buttons">
-        {buttons.map(button => (
-          <div
-            className="card-button"
-            data-testid="card-button"
-            key={`${button.label}-${button.href}`}
+      {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,
+            }}
           >
-            {/* @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}
+            <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">
+          {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>
-        ))}
-      </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>
-    )}
-  </>
-);
+          ))}
+        </div>
+      )}
+    </>
+  );
+};
 
 CardContent.propTypes = {
   type: PropTypes.oneOf(["default", "degree", "event", "news", "story"]),
@@ -415,7 +426,6 @@ const EventInfo = ({
             <div>
               <i className="far fa-calendar" />
             </div>
-            {}
             <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(eventTime)} />
           </div>
         )}
@@ -442,7 +452,6 @@ const EventInfo = ({
             <div>
               <i className="far fa-calendar" />
             </div>
-            {}
             <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(eventTime)} />
           </div>
         </div>
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",