diff --git a/components/DataCard/DataCard.styles.ts b/components/DataCard/DataCard.styles.ts
index 6a35782f..168d3002 100644
--- a/components/DataCard/DataCard.styles.ts
+++ b/components/DataCard/DataCard.styles.ts
@@ -1,8 +1,10 @@
 import { cnb } from 'cnbuilder';
 
+export const animateWrapper = 'h-full';
 // Use border-black-50/50 which works well on both light and dark backgrounds
 export const root = 'relative overflow-hidden size-full break-words border-l-2 border-black-50/50';
 
+export const flex = 'h-full';
 export const content = (
   hasBarColor?: boolean,
 ) => cnb('rs-pl-2', {
diff --git a/components/DataCard/DataCard.tsx b/components/DataCard/DataCard.tsx
index 2e4f4302..1f04dc19 100644
--- a/components/DataCard/DataCard.tsx
+++ b/components/DataCard/DataCard.tsx
@@ -41,11 +41,10 @@ export const DataCard = ({
   className,
   ...props
 }: DataCardProps) => {
-  // const numberToAnimate = parseFloat(heading?.match(/\d+/)[0]);
   const headingProcessed = isCounter ? splitNumberString(heading) : undefined;
 
   return (
-    <AnimateInView animation={animation} delay={delay} className="h-full">
+    <AnimateInView animation={animation} delay={delay} className={styles.animateWrapper}>
       <Container
         as="article"
         width="full"
@@ -53,7 +52,7 @@ export const DataCard = ({
         className={styles.root}
         {...props}
       >
-        <FlexBox direction="col" className="h-full">
+        <FlexBox direction="col" className={styles.flex}>
           {heading && (
             <Heading
               as={headingLevel}