@telus-uds/components-web 4.18.0 → 4.18.1

package/CHANGELOG.md

@@ -1,28 +1,40 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 29 Jan 2026 16:42:47 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Feb 2026 02:50:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.18.1
+
+Wed, 18 Feb 2026 02:50:19 GMT
+
+### Patches
+
+- refactor: simplify cardBaseTokens object creation by removing redundant destructuring (josue.higueroscalderon@telus.com)
+- `IconButton`: Update stories (david.melara1@telus.com)
+- `Card`: background image hidden behind the default color issue fixed (josue.higueroscalderon@telus.com)
+- Bump @telus-uds/components-base to v3.28.0
+- Bump @telus-uds/system-theme-tokens to v4.20.0
+
 ## 4.18.0
 
-Thu, 29 Jan 2026 16:42:47 GMT
+Thu, 29 Jan 2026 15:50:17 GMT
 
 ### Minor changes
 
-- `NavigationBar`: add contentMaxWidth prop (guillermo.peitzner@telus.com)
 - `List`: new feature alignment for the icons added (josue.higueroscalderon@telus.com)
-- `QuantitySelector`: add inactive prop (guillermo.peitzner@telus.com)
 - `Card`: Add full-bleed content support to Card component allowing content to extend to card edges (josue.higueroscalderon@telus.com)
+- `QuantitySelector`: add inactive prop (guillermo.peitzner@telus.com)
 - `Card`: Unnecessary comments removed. (josue.higueroscalderon@telus.com)
+- `NavigationBar`: add contentMaxWidth prop (guillermo.peitzner@telus.com)
 - Bump @telus-uds/components-base to v3.27.0
 - Bump @telus-uds/system-theme-tokens to v4.19.0
 
 ### Patches
 
-- `Card`: component enhaced to manage the hover, focus and pressed states of interactiveCard properly (josue.higueroscalderon@telus.com)
-- `NavigationBar`: fix console warning (guillermo.peitzner@telus.com)
 - `QuantitySelector`: spacer alignment issue fixed (josue.higueroscalderon@telus.com)
+- `NavigationBar`: fix console warning (guillermo.peitzner@telus.com)
+- `Card`: component enhaced to manage the hover, focus and pressed states of interactiveCard properly (josue.higueroscalderon@telus.com)
 
 ## 4.17.0
 

package/lib/cjs/Card/Card.js

@@ -58,11 +58,9 @@ const getCardContentTokens = function (baseTokens) {
   // Determine background color based on conditions
   let backgroundColorOverride = {};
   if (useTransparentBackground) {
-    if (!backgroundImage) {
-      backgroundColorOverride = {
-        backgroundColor: 'transparent'
-      };
-    }
+    backgroundColorOverride = {
+      backgroundColor: 'transparent'
+    };
   } else if (backgroundImage) {
     backgroundColorOverride = {
       backgroundColor: 'transparent'
@@ -236,7 +234,11 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
-  const allThemeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const variantForTokens = backgroundImage ? {
+    ...variant,
+    style: undefined
+  } : variant;
+  const allThemeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variantForTokens);
   const {
     borderRadius
   } = allThemeTokens;
@@ -289,16 +291,17 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     interactive: true
   });
 
-  // Remove backgroundColor from tokens for full bleed interactive content
-  // to prevent background from covering the full bleed image
-  const {
-    backgroundColor: _,
-    ...tokensWithoutBg
-  } = tokens;
-  const getFullBleedInteractiveTokens = (0, _componentsBase.useThemeTokensCallback)('Card', tokensWithoutBg, {
+  // Keep backgroundColor for CardContent, it won't affect FullBleedContent image
+  const tokensWithoutBg = tokens;
+  const fullBleedInteractiveVariant = backgroundImage ? {
+    ...variant,
+    interactive: true,
+    style: undefined
+  } : {
     ...variant,
     interactive: true
-  });
+  };
+  const getFullBleedInteractiveTokens = (0, _componentsBase.useThemeTokensCallback)('Card', tokensWithoutBg, fullBleedInteractiveVariant);
   const getFullBleedInteractiveCardTokens = cardState => {
     return {
       ...getFullBleedInteractiveTokens(cardState),
@@ -342,8 +345,16 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   };
   const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref4 => {
     let [key] = _ref4;
-    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage && interactiveCard?.body ? ['backgroundColor'] : [])].includes(key);
+    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor', 'gradient', 'backgroundGradient'] : [])].includes(key);
   }));
+  const cardBaseVariant = backgroundImage ? {
+    ...(interactiveCard?.body ? mergedVariant : variant),
+    padding: 'custom',
+    style: undefined
+  } : {
+    ...(interactiveCard?.body ? mergedVariant : variant),
+    padding: 'custom'
+  };
   const isHorizontalFullBleed = fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT;
   const isVerticalFullBleed = fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM;
   const imageWrapperStyleProps = {
@@ -360,12 +371,9 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
     ref: ref,
-    variant: {
-      ...(interactiveCard?.body ? mergedVariant : variant),
-      padding: 'custom'
-    },
+    variant: cardBaseVariant,
     tokens: cardBaseTokens,
-    backgroundImage: !interactiveCard?.body && backgroundImage,
+    backgroundImage: backgroundImage,
     onPress: fullBleedInteractive ? undefined : onPress,
     ...(interactiveCard?.selectionType && {
       interactiveCard,
@@ -373,16 +381,18 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
     }),
     ...selectProps(restProps),
     children: [interactiveCard?.selectionType && children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-      tokens: tokens,
+      tokens: getCardContentTokens(tokens, {
+        backgroundImage
+      }),
       variant: variant,
       withFooter: hasFooter,
+      backgroundImage: backgroundImage,
       children: children
     }) : null, interactiveCard?.body && !interactiveCard.selectionType ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
         ref: ref,
         tokens: getThemeTokens,
         dataSet: dataSet,
-        backgroundImage: backgroundImage,
         onPress: onPress,
         href: interactiveCard?.href,
         hrefAttrs: interactiveCard?.hrefAttrs,
@@ -391,9 +401,12 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
           children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
         })
       }), children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
-        tokens: tokens,
+        tokens: getCardContentTokens(tokens, {
+          backgroundImage
+        }),
         variant: variant,
         withFooter: hasFooter,
+        backgroundImage: backgroundImage,
         children: children
       }) : null]
     }) : null, fullBleedInteractive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
@@ -436,6 +449,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
                 },
                 variant: variant,
                 withFooter: hasFooter,
+                backgroundImage: backgroundImage,
                 children: children
               })
             }) : null, fullBleedContentPosition !== POSITION.NONE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
@@ -466,6 +480,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       }),
       variant: variant,
       withFooter: hasFooter,
+      backgroundImage: backgroundImage,
       children: children
     }) : null, !fullBleedInteractive && fullBleedContentPosition !== POSITION.NONE ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: contentStackDirection,
@@ -477,10 +492,12 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
           tokens: getCardContentTokens(tokens, {
+            backgroundImage,
             fullBleedContentChildrenAlign
           }),
           variant: variant,
           withFooter: hasFooter,
+          backgroundImage: backgroundImage,
           children: children
         })
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {

package/lib/cjs/Card/CardContent.js

@@ -63,6 +63,7 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tokens,
     variant,
     withFooter = false,
+    backgroundImage,
     ...rest
   } = _ref2;
   const {
@@ -71,10 +72,32 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     }
   } = (0, _componentsBase.useTheme)();
   const allTokens = (0, _componentsBase.useAllViewportTokens)('Card', tokens, variant);
+
+  // Override backgroundColor if explicitly set in tokens to ensure it takes priority over theme tokens
+  // This is crucial for scenarios with backgroundImage where we need transparency
+  if (tokens.backgroundColor !== undefined) {
+    allTokens.current.backgroundColor = tokens.backgroundColor;
+    allTokens.xs.backgroundColor = tokens.backgroundColor;
+    allTokens.sm.backgroundColor = tokens.backgroundColor;
+    allTokens.md.backgroundColor = tokens.backgroundColor;
+    allTokens.lg.backgroundColor = tokens.backgroundColor;
+    allTokens.xl.backgroundColor = tokens.backgroundColor;
+  }
+
+  // When backgroundImage is present on the Card, ensure CardContent background is transparent
+  // so the background image from the parent CardBase can show through
+  if (backgroundImage) {
+    allTokens.current.backgroundColor = 'transparent';
+    allTokens.xs.backgroundColor = 'transparent';
+    allTokens.sm.backgroundColor = 'transparent';
+    allTokens.md.backgroundColor = 'transparent';
+    allTokens.lg.backgroundColor = 'transparent';
+    allTokens.xl.backgroundColor = 'transparent';
+  }
   let themeTokens;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const stylesByViewport = {
+    const paddingAdjustments = {
       xs: {
         paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
         paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
@@ -106,15 +129,16 @@ const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         paddingTop: allTokens.xl.paddingTop - allTokens.xl.borderWidth
       }
     };
-    const mediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(stylesByViewport);
+    const mediaQueryStyles = (0, _componentsBase.createMediaQueryStyles)(paddingAdjustments);
+    const baseStyle = {
+      ...allTokens.current,
+      ...mediaQueryStyles
+    };
     const {
       ids,
       styles
     } = _componentsBase.StyleSheet.create({
-      cardContent: {
-        ...allTokens.current,
-        ...mediaQueryStyles
-      }
+      cardContent: baseStyle
     });
     themeTokens = styles.cardContent;
     mediaIds = ids.cardContent;
@@ -152,6 +176,11 @@ CardContent.propTypes = {
   /**
    * Whether the card has a footer.
    */
-  withFooter: _propTypes.default.bool
+  withFooter: _propTypes.default.bool,
+  /**
+   * Background image object from parent Card component.
+   * When present, makes the CardContent background transparent.
+   */
+  backgroundImage: _propTypes.default.object
 };
 var _default = exports.default = CardContent;

package/lib/cjs/Testimonial/Testimonial.js

@@ -226,7 +226,8 @@ Testimonial.propTypes = {
   testimonialStyle: _propTypes.default.oneOf(['large', 'heading']),
   /**
    * Whether to show or not dividers at the top and the bottom of the testimonial
-  showDivider: PropTypes.bool,
+   */
+  showDivider: _propTypes.default.bool,
   /**
    * The src attribute for the Image component or custom JSX content to render instead
    */

package/lib/esm/Card/Card.js

@@ -50,11 +50,9 @@ const getCardContentTokens = function (baseTokens) {
   // Determine background color based on conditions
   let backgroundColorOverride = {};
   if (useTransparentBackground) {
-    if (!backgroundImage) {
-      backgroundColorOverride = {
-        backgroundColor: 'transparent'
-      };
-    }
+    backgroundColorOverride = {
+      backgroundColor: 'transparent'
+    };
   } else if (backgroundImage) {
     backgroundColorOverride = {
       backgroundColor: 'transparent'
@@ -228,7 +226,11 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
 
   // If the card has rounded corners and a full bleed image, we need to apply
   // those corners on the image as well, but partially
-  const allThemeTokens = useThemeTokens('Card', tokens, variant);
+  const variantForTokens = backgroundImage ? {
+    ...variant,
+    style: undefined
+  } : variant;
+  const allThemeTokens = useThemeTokens('Card', tokens, variantForTokens);
   const {
     borderRadius
   } = allThemeTokens;
@@ -281,16 +283,17 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     interactive: true
   });
 
-  // Remove backgroundColor from tokens for full bleed interactive content
-  // to prevent background from covering the full bleed image
-  const {
-    backgroundColor: _,
-    ...tokensWithoutBg
-  } = tokens;
-  const getFullBleedInteractiveTokens = useThemeTokensCallback('Card', tokensWithoutBg, {
+  // Keep backgroundColor for CardContent, it won't affect FullBleedContent image
+  const tokensWithoutBg = tokens;
+  const fullBleedInteractiveVariant = backgroundImage ? {
+    ...variant,
+    interactive: true,
+    style: undefined
+  } : {
     ...variant,
     interactive: true
-  });
+  };
+  const getFullBleedInteractiveTokens = useThemeTokensCallback('Card', tokensWithoutBg, fullBleedInteractiveVariant);
   const getFullBleedInteractiveCardTokens = cardState => {
     return {
       ...getFullBleedInteractiveTokens(cardState),
@@ -334,8 +337,16 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   };
   const cardBaseTokens = Object.fromEntries(Object.entries(tokens).filter(_ref4 => {
     let [key] = _ref4;
-    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage && interactiveCard?.body ? ['backgroundColor'] : [])].includes(key);
+    return !['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', ...(backgroundImage ? ['backgroundColor', 'gradient', 'backgroundGradient'] : [])].includes(key);
   }));
+  const cardBaseVariant = backgroundImage ? {
+    ...(interactiveCard?.body ? mergedVariant : variant),
+    padding: 'custom',
+    style: undefined
+  } : {
+    ...(interactiveCard?.body ? mergedVariant : variant),
+    padding: 'custom'
+  };
   const isHorizontalFullBleed = fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT;
   const isVerticalFullBleed = fullBleedContentPosition === POSITION.TOP || fullBleedContentPosition === POSITION.BOTTOM;
   const imageWrapperStyleProps = {
@@ -352,12 +363,9 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
   };
   return /*#__PURE__*/_jsxs(CardBase, {
     ref: ref,
-    variant: {
-      ...(interactiveCard?.body ? mergedVariant : variant),
-      padding: 'custom'
-    },
+    variant: cardBaseVariant,
     tokens: cardBaseTokens,
-    backgroundImage: !interactiveCard?.body && backgroundImage,
+    backgroundImage: backgroundImage,
     onPress: fullBleedInteractive ? undefined : onPress,
     ...(interactiveCard?.selectionType && {
       interactiveCard,
@@ -365,16 +373,18 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
     }),
     ...selectProps(restProps),
     children: [interactiveCard?.selectionType && children ? /*#__PURE__*/_jsx(CardContent, {
-      tokens: tokens,
+      tokens: getCardContentTokens(tokens, {
+        backgroundImage
+      }),
       variant: variant,
       withFooter: hasFooter,
+      backgroundImage: backgroundImage,
       children: children
     }) : null, interactiveCard?.body && !interactiveCard.selectionType ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(PressableCardBase, {
         ref: ref,
         tokens: getThemeTokens,
         dataSet: dataSet,
-        backgroundImage: backgroundImage,
         onPress: onPress,
         href: interactiveCard?.href,
         hrefAttrs: interactiveCard?.hrefAttrs,
@@ -383,9 +393,12 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
           children: typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body
         })
       }), children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? /*#__PURE__*/_jsx(CardContent, {
-        tokens: tokens,
+        tokens: getCardContentTokens(tokens, {
+          backgroundImage
+        }),
         variant: variant,
         withFooter: hasFooter,
+        backgroundImage: backgroundImage,
         children: children
       }) : null]
     }) : null, fullBleedInteractive ? /*#__PURE__*/_jsx(PressableCardBase, {
@@ -428,6 +441,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
                 },
                 variant: variant,
                 withFooter: hasFooter,
+                backgroundImage: backgroundImage,
                 children: children
               })
             }) : null, fullBleedContentPosition !== POSITION.NONE && /*#__PURE__*/_jsx(ConditionalWrapper, {
@@ -458,6 +472,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
       }),
       variant: variant,
       withFooter: hasFooter,
+      backgroundImage: backgroundImage,
       children: children
     }) : null, !fullBleedInteractive && fullBleedContentPosition !== POSITION.NONE ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
@@ -469,10 +484,12 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
         condition: isImageWidthAdjustable,
         children: /*#__PURE__*/_jsx(CardContent, {
           tokens: getCardContentTokens(tokens, {
+            backgroundImage,
             fullBleedContentChildrenAlign
           }),
           variant: variant,
           withFooter: hasFooter,
+          backgroundImage: backgroundImage,
           children: children
         })
       }) : null, /*#__PURE__*/_jsx(ConditionalWrapper, {

package/lib/esm/Card/CardContent.js

@@ -56,6 +56,7 @@ const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     tokens,
     variant,
     withFooter = false,
+    backgroundImage,
     ...rest
   } = _ref2;
   const {
@@ -64,10 +65,32 @@ const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }
   } = useTheme();
   const allTokens = useAllViewportTokens('Card', tokens, variant);
+
+  // Override backgroundColor if explicitly set in tokens to ensure it takes priority over theme tokens
+  // This is crucial for scenarios with backgroundImage where we need transparency
+  if (tokens.backgroundColor !== undefined) {
+    allTokens.current.backgroundColor = tokens.backgroundColor;
+    allTokens.xs.backgroundColor = tokens.backgroundColor;
+    allTokens.sm.backgroundColor = tokens.backgroundColor;
+    allTokens.md.backgroundColor = tokens.backgroundColor;
+    allTokens.lg.backgroundColor = tokens.backgroundColor;
+    allTokens.xl.backgroundColor = tokens.backgroundColor;
+  }
+
+  // When backgroundImage is present on the Card, ensure CardContent background is transparent
+  // so the background image from the parent CardBase can show through
+  if (backgroundImage) {
+    allTokens.current.backgroundColor = 'transparent';
+    allTokens.xs.backgroundColor = 'transparent';
+    allTokens.sm.backgroundColor = 'transparent';
+    allTokens.md.backgroundColor = 'transparent';
+    allTokens.lg.backgroundColor = 'transparent';
+    allTokens.xl.backgroundColor = 'transparent';
+  }
   let themeTokens;
   let mediaIds;
   if (enableMediaQueryStyleSheet) {
-    const stylesByViewport = {
+    const paddingAdjustments = {
       xs: {
         paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
         paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
@@ -99,15 +122,16 @@ const CardContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
         paddingTop: allTokens.xl.paddingTop - allTokens.xl.borderWidth
       }
     };
-    const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
+    const mediaQueryStyles = createMediaQueryStyles(paddingAdjustments);
+    const baseStyle = {
+      ...allTokens.current,
+      ...mediaQueryStyles
+    };
     const {
       ids,
       styles
     } = StyleSheet.create({
-      cardContent: {
-        ...allTokens.current,
-        ...mediaQueryStyles
-      }
+      cardContent: baseStyle
     });
     themeTokens = styles.cardContent;
     mediaIds = ids.cardContent;
@@ -145,6 +169,11 @@ CardContent.propTypes = {
   /**
    * Whether the card has a footer.
    */
-  withFooter: PropTypes.bool
+  withFooter: PropTypes.bool,
+  /**
+   * Background image object from parent Card component.
+   * When present, makes the CardContent background transparent.
+   */
+  backgroundImage: PropTypes.object
 };
 export default CardContent;

package/lib/esm/Testimonial/Testimonial.js

@@ -219,6 +219,7 @@ Testimonial.propTypes = {
   testimonialStyle: PropTypes.oneOf(['large', 'heading']),
   /**
    * Whether to show or not dividers at the top and the bottom of the testimonial
+   */
   showDivider: PropTypes.bool,
   /**
    * The src attribute for the Image component or custom JSX content to render instead

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.27.0",
+    "@telus-uds/components-base": "^3.28.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.19.0",
+    "@telus-uds/system-theme-tokens": "^4.20.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.18.0"
+  "version": "4.18.1"
 }

package/src/Card/Card.jsx

@@ -64,9 +64,7 @@ const getCardContentTokens = (baseTokens, options = {}) => {
   // Determine background color based on conditions
   let backgroundColorOverride = {}
   if (useTransparentBackground) {
-    if (!backgroundImage) {
-      backgroundColorOverride = { backgroundColor: 'transparent' }
-    }
+    backgroundColorOverride = { backgroundColor: 'transparent' }
   } else if (backgroundImage) {
     backgroundColorOverride = { backgroundColor: 'transparent' }
   }
@@ -218,7 +216,8 @@ const Card = React.forwardRef(
 
     // If the card has rounded corners and a full bleed image, we need to apply
     // those corners on the image as well, but partially
-    const allThemeTokens = useThemeTokens('Card', tokens, variant)
+    const variantForTokens = backgroundImage ? { ...variant, style: undefined } : variant
+    const allThemeTokens = useThemeTokens('Card', tokens, variantForTokens)
     const { borderRadius } = allThemeTokens
 
     // Interactive cards: merge variants for CardBase (outer container)
@@ -274,14 +273,25 @@ const Card = React.forwardRef(
       }
     )
 
-    // Remove backgroundColor from tokens for full bleed interactive content
-    // to prevent background from covering the full bleed image
-    const { backgroundColor: _, ...tokensWithoutBg } = tokens
-
-    const getFullBleedInteractiveTokens = useThemeTokensCallback('Card', tokensWithoutBg, {
-      ...variant,
-      interactive: true
-    })
+    // Keep backgroundColor for CardContent, it won't affect FullBleedContent image
+    const tokensWithoutBg = tokens
+
+    const fullBleedInteractiveVariant = backgroundImage
+      ? {
+          ...variant,
+          interactive: true,
+          style: undefined
+        }
+      : {
+          ...variant,
+          interactive: true
+        }
+
+    const getFullBleedInteractiveTokens = useThemeTokensCallback(
+      'Card',
+      tokensWithoutBg,
+      fullBleedInteractiveVariant
+    )
 
     const getFullBleedInteractiveCardTokens = (cardState) => {
       return {
@@ -343,11 +353,19 @@ const Card = React.forwardRef(
             'paddingBottom',
             'paddingLeft',
             'paddingRight',
-            ...(backgroundImage && interactiveCard?.body ? ['backgroundColor'] : [])
+            ...(backgroundImage ? ['backgroundColor', 'gradient', 'backgroundGradient'] : [])
           ].includes(key)
       )
     )
 
+    const cardBaseVariant = backgroundImage
+      ? {
+          ...(interactiveCard?.body ? mergedVariant : variant),
+          padding: 'custom',
+          style: undefined
+        }
+      : { ...(interactiveCard?.body ? mergedVariant : variant), padding: 'custom' }
+
     const isHorizontalFullBleed =
       fullBleedContentPosition === POSITION.LEFT || fullBleedContentPosition === POSITION.RIGHT
     const isVerticalFullBleed =
@@ -363,15 +381,20 @@ const Card = React.forwardRef(
     return (
       <CardBase
         ref={ref}
-        variant={{ ...(interactiveCard?.body ? mergedVariant : variant), padding: 'custom' }}
+        variant={cardBaseVariant}
         tokens={cardBaseTokens}
-        backgroundImage={!interactiveCard?.body && backgroundImage}
+        backgroundImage={backgroundImage}
         onPress={fullBleedInteractive ? undefined : onPress}
         {...(interactiveCard?.selectionType && { interactiveCard, id: rest.id })}
         {...selectProps(restProps)}
       >
         {interactiveCard?.selectionType && children ? (
-          <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+          <CardContent
+            tokens={getCardContentTokens(tokens, { backgroundImage })}
+            variant={variant}
+            withFooter={hasFooter}
+            backgroundImage={backgroundImage}
+          >
             {children}
           </CardContent>
         ) : null}
@@ -381,7 +404,6 @@ const Card = React.forwardRef(
               ref={ref}
               tokens={getThemeTokens}
               dataSet={dataSet}
-              backgroundImage={backgroundImage}
               onPress={onPress}
               href={interactiveCard?.href}
               hrefAttrs={interactiveCard?.hrefAttrs}
@@ -396,7 +418,12 @@ const Card = React.forwardRef(
               )}
             </PressableCardBase>
             {children && fullBleedContentPosition === POSITION.NONE && !fullBleedInteractive ? (
-              <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+              <CardContent
+                tokens={getCardContentTokens(tokens, { backgroundImage })}
+                variant={variant}
+                withFooter={hasFooter}
+                backgroundImage={backgroundImage}
+              >
                 {children}
               </CardContent>
             ) : null}
@@ -462,6 +489,7 @@ const Card = React.forwardRef(
                           }}
                           variant={variant}
                           withFooter={hasFooter}
+                          backgroundImage={backgroundImage}
                         >
                           {children}
                         </CardContent>
@@ -508,6 +536,7 @@ const Card = React.forwardRef(
             })}
             variant={variant}
             withFooter={hasFooter}
+            backgroundImage={backgroundImage}
           >
             {children}
           </CardContent>
@@ -526,10 +555,12 @@ const Card = React.forwardRef(
               >
                 <CardContent
                   tokens={getCardContentTokens(tokens, {
+                    backgroundImage,
                     fullBleedContentChildrenAlign
                   })}
                   variant={variant}
                   withFooter={hasFooter}
+                  backgroundImage={backgroundImage}
                 >
                   {children}
                 </CardContent>

package/src/Card/CardContent.jsx

@@ -55,18 +55,43 @@ const CardContentContainer = styled.div(
  * Card content, applying the card tokens as per the theme used.
  */
 const CardContent = React.forwardRef(
-  ({ children, flexContent, tokens, variant, withFooter = false, ...rest }, ref) => {
+  (
+    { children, flexContent, tokens, variant, withFooter = false, backgroundImage, ...rest },
+    ref
+  ) => {
     const {
       themeOptions: { enableMediaQueryStyleSheet }
     } = useTheme()
 
     const allTokens = useAllViewportTokens('Card', tokens, variant)
 
+    // Override backgroundColor if explicitly set in tokens to ensure it takes priority over theme tokens
+    // This is crucial for scenarios with backgroundImage where we need transparency
+    if (tokens.backgroundColor !== undefined) {
+      allTokens.current.backgroundColor = tokens.backgroundColor
+      allTokens.xs.backgroundColor = tokens.backgroundColor
+      allTokens.sm.backgroundColor = tokens.backgroundColor
+      allTokens.md.backgroundColor = tokens.backgroundColor
+      allTokens.lg.backgroundColor = tokens.backgroundColor
+      allTokens.xl.backgroundColor = tokens.backgroundColor
+    }
+
+    // When backgroundImage is present on the Card, ensure CardContent background is transparent
+    // so the background image from the parent CardBase can show through
+    if (backgroundImage) {
+      allTokens.current.backgroundColor = 'transparent'
+      allTokens.xs.backgroundColor = 'transparent'
+      allTokens.sm.backgroundColor = 'transparent'
+      allTokens.md.backgroundColor = 'transparent'
+      allTokens.lg.backgroundColor = 'transparent'
+      allTokens.xl.backgroundColor = 'transparent'
+    }
+
     let themeTokens
     let mediaIds
 
     if (enableMediaQueryStyleSheet) {
-      const stylesByViewport = {
+      const paddingAdjustments = {
         xs: {
           paddingBottom: allTokens.xs.paddingBottom - allTokens.xs.borderWidth,
           paddingLeft: allTokens.xs.paddingLeft - allTokens.xs.borderWidth,
@@ -99,12 +124,14 @@ const CardContent = React.forwardRef(
         }
       }
 
-      const mediaQueryStyles = createMediaQueryStyles(stylesByViewport)
+      const mediaQueryStyles = createMediaQueryStyles(paddingAdjustments)
+      const baseStyle = {
+        ...allTokens.current,
+        ...mediaQueryStyles
+      }
+
       const { ids, styles } = StyleSheet.create({
-        cardContent: {
-          ...allTokens.current,
-          ...mediaQueryStyles
-        }
+        cardContent: baseStyle
       })
 
       themeTokens = styles.cardContent
@@ -151,7 +178,12 @@ CardContent.propTypes = {
   /**
    * Whether the card has a footer.
    */
-  withFooter: PropTypes.bool
+  withFooter: PropTypes.bool,
+  /**
+   * Background image object from parent Card component.
+   * When present, makes the CardContent background transparent.
+   */
+  backgroundImage: PropTypes.object
 }
 
 export default CardContent

package/src/Testimonial/Testimonial.jsx

@@ -229,6 +229,7 @@ Testimonial.propTypes = {
   testimonialStyle: PropTypes.oneOf(['large', 'heading']),
   /**
    * Whether to show or not dividers at the top and the bottom of the testimonial
+   */
   showDivider: PropTypes.bool,
   /**
    * The src attribute for the Image component or custom JSX content to render instead