fix(unity-react-core): button on cards fixed missing breakline

packages/unity-react-core/src/components/Card/Card.jsx

@@ -321,6 +321,7 @@ const CardContent = ({
         </div>
       ) : (
         <>
+          {(!title && !body && !showEventInfo) && <br/>}
           {buttons && (
             <div className="card-buttons">
               {buttons.map(button => (

packages/unity-react-core/src/components/CardArrangement/CardArrangement.stories.jsx

@@ -225,6 +225,39 @@ const imageCards = [
   },
 ];
 
+const imageButtonCards = [
+  {
+    type: "default",
+    image: img1,
+    alt: "Image button card 1",
+    title: "Example",
+    body: "This is the body content for the first card.",
+    buttons: [
+      {
+        color: "gold",
+        size: "default",
+        label: "Explore",
+        ariaLabel: "Explore",
+        href: "#",
+      },
+    ],
+  },
+  {
+    type: "default",
+    image: img1,
+    alt: "Image button card 2",
+    buttons: [
+      {
+        color: "gold",
+        size: "default",
+        label: "Explore",
+        ariaLabel: "Explore",
+        href: "#",
+      }
+    ]
+  },
+];
+
 const Template = args => (
   <div className="container">
     <CardArrangement {...args} />
@@ -641,3 +674,27 @@ Example with image cards that display a visual representation along with heading
     },
   },
 };
+
+export const ImageButtonCards = Template.bind({});
+ImageButtonCards.args = {
+  cards: imageButtonCards,
+  cardType: "default",
+  columns: 2,
+};
+ImageButtonCards.storyName = "Cards with image and buttons";
+ImageButtonCards.parameters = {
+  docs: {
+    description: {
+      story: `
+Example with cards that display a visual representation along with a button.
+
+\`\`\`jsx
+<CardArrangement
+  cards={imageButtonCards}
+  cardType="image"
+/>
+\`\`\`
+      `,
+    },
+  },
+};

packages/unity-react-core/src/components/Image/Image.jsx

@@ -2,6 +2,7 @@ import { spreadClasses, sanitizeDangerousMarkup } from "@asu/shared";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import React from "react";
+import { Button } from "../Button/Button";
 
 // @ts-ignore
 
@@ -32,6 +33,7 @@ export const Image = ({
   title,
   caption,
   captionTitle,
+  buttons,
   border,
   dropShadow,
 }) => {
@@ -67,26 +69,57 @@ export const Image = ({
     );
   };
 
-  const renderFigure = () => (
-    <div className={borderAndDropShadowClasses}>
-      <figure className="figure uds-figure">
-        {renderImage()}
-        {caption && (
-          <figcaption className="figure-caption uds-figure-caption">
-            {captionTitle && <h3>{captionTitle}</h3>}
-            <span
-              className="uds-caption-text"
-              dangerouslySetInnerHTML={sanitizeDangerousMarkup(caption)}
-            />
-          </figcaption>
+  const renderButtons = () => {
+    return (
+      <>
+        {buttons && (
+          <div className="card-buttons" style={{marginTop: caption?20:0}}>
+            {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>
         )}
-      </figure>
-    </div>
-  );
+      </>
+    );
+  };
+
+  const renderFigure = () => {
+    return (
+      <div className={borderAndDropShadowClasses}>
+        <figure className="figure uds-figure">
+          {renderImage()}
+            <figcaption className="figure-caption uds-figure-caption">
+              {captionTitle && <h3>{captionTitle}</h3>}
+              {caption &&
+              <span
+                className="uds-caption-text"
+                dangerouslySetInnerHTML={sanitizeDangerousMarkup(caption)}
+              />}
+               {renderButtons()}
+            </figcaption>
+        </figure>
+      </div>
+    );
+  };
+
+  return buttons || caption ? renderFigure() : renderImage(borderAndDropShadowClasses);
 
-  return (
-    <>{caption ? renderFigure() : renderImage(borderAndDropShadowClasses)}</>
-  );
 };
 
 Image.propTypes = {

packages/unity-react-core/src/core/types/image-types.js

@@ -1,5 +1,9 @@
 // @ts-check
 
+/**
+ * @typedef {import('./shared-types').ButtonProps} ButtonProps
+ */
+
 /**
  * @typedef {Object} ImageComponentProps
  * @property {string} src
@@ -15,6 +19,7 @@
  * @property {string} [title]
  * @property {string} [caption]
  * @property {string} [captionTitle]
+ * @property {ButtonProps[]} [buttons]
  * @property {boolean} [border]
  * @property {boolean} [dropShadow]
  */