diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
index 12cdef52cb..f7e2eb69c6 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.stories.tsx
@@ -234,6 +234,7 @@ export const Small = () => (
         alignGauge="bottom"
         size="small"
         title="Progress"
+        subheader="With a subheader"
         progress={0.57}
       />
     </Grid>
diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
index 4e73487983..9f6de8eafe 100644
--- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
+++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx
@@ -91,13 +91,12 @@ export function GaugeCard(props: Props) {
         variant={variant}
         alignContent={alignGauge}
         icon={icon}
-        titleTypographyProps={
-          size === 'small'
-            ? {
-                variant: 'h6',
-              }
-            : undefined
-        }
+        titleTypographyProps={{
+          ...(size === 'small' ? { variant: 'subtitle2' } : undefined),
+        }}
+        subheaderTypographyProps={{
+          ...(size === 'small' ? { variant: 'body2' } : undefined),
+        }}
       >
         <Gauge {...gaugeProps} size={size} />
       </InfoCard>
diff --git a/packages/core-components/src/layout/InfoCard/InfoCard.tsx b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
index 1f41a315b8..e80c0d3384 100644
--- a/packages/core-components/src/layout/InfoCard/InfoCard.tsx
+++ b/packages/core-components/src/layout/InfoCard/InfoCard.tsx
@@ -155,6 +155,7 @@ export type Props = {
   className?: string;
   noPadding?: boolean;
   titleTypographyProps?: object;
+  subheaderTypographyProps?: object;
 };
 
 /**
@@ -185,6 +186,7 @@ export function InfoCard(props: Props): JSX.Element {
     className,
     noPadding,
     titleTypographyProps,
+    subheaderTypographyProps,
   } = props;
   const classes = useStyles();
   /**
@@ -246,6 +248,7 @@ export function InfoCard(props: Props): JSX.Element {
             action={action}
             style={{ ...headerStyle }}
             titleTypographyProps={titleTypographyProps}
+            subheaderTypographyProps={subheaderTypographyProps}
             {...headerProps}
           />
         )}