fix(SW-1188): add card variant

components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx

@@ -111,6 +111,7 @@ export default function MegaMenu({
               onSecondaryButtonClick={handleNavigate}
               imageGradient
               theme="image"
+              height="dynamic"
             />
           </div>
         ) : null}

components/TempDesignSystem/Card/card.module.css

@@ -5,7 +5,6 @@
   flex-direction: column;
   justify-content: center;
   border-radius: var(--Corner-radius-Medium);
-  height: 320px; /* Fixed height from Figma */
   margin-right: var(--Spacing-x2);
   text-align: center;
   width: 100%;
@@ -13,6 +12,14 @@
   overflow: hidden;
 }
 
+.fixed {
+  height: 320px; /* Fixed height from Figma */
+}
+
+.dynamic {
+  height: 100%;
+}
+
 .imageWrapper {
   display: flex;
   width: 100%;

components/TempDesignSystem/Card/index.tsx

@@ -32,6 +32,7 @@ export default function Card({
   imageGradient,
   onPrimaryButtonClick,
   onSecondaryButtonClick,
+  height,
 }: CardProps) {
   const buttonTheme = getButtonTheme(theme)
   const titleFontColor = getTitleFontColor(theme)
@@ -46,15 +47,21 @@ export default function Card({
       ? backgroundImage.dimensions.aspectRatio * imageHeight
       : 420)
 
+  const imageWrapper =
+    height === "dynamic"
+      ? `${styles.imageWrapper} ${styles.dynamic}`
+      : `${styles.imageWrapper} ${styles.fixed}`
+
   return (
     <article
       className={cardVariants({
         theme,
+        height,
         className,
       })}
     >
       {backgroundImage && (
-        <div className={imageGradient ? styles.imageWrapper : ""}>
+        <div className={imageGradient ? imageWrapper : ""}>
           <Image
             src={backgroundImage.url}
             className={styles.image}

components/TempDesignSystem/Card/variants.ts

@@ -16,8 +16,13 @@ export const cardVariants = cva(styles.container, {
 
       image: styles.themeImage,
     },
+    height: {
+      fixed: styles.fixed,
+      dynamic: styles.dynamic,
+    },
   },
   defaultVariants: {
     theme: "one",
+    height: "fixed",
   },
 })