diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index c3b54496fa..e95fc38d8f 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -62,6 +62,7 @@ import type {
ImageSizeType,
} from './components/ImageWrapper';
import { ImageWrapper } from './components/ImageWrapper';
+import { SvgWaveform } from './components/SvgWaveform';
import { TrailText, type TrailTextSize } from './components/TrailText';
export type Position = 'inner' | 'outer' | 'none';
@@ -149,27 +150,15 @@ export type Props = {
galleryCount?: number;
};
-const Waveform = () => {
- const waveformStyles = css`
- position: absolute;
- left: 0;
- bottom: 0;
- height: 50px;
- `;
-
- return (
-
-
- );
-};
+const waveformWrapper = css`
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ svg {
+ display: block;
+ height: 33px;
+ }
+`;
const starWrapper = (cardHasImage: boolean) => css`
background-color: ${sourcePalette.brandAlt[400]};
@@ -681,6 +670,15 @@ export const Card = ({
containerType={containerType}
gapSize={getGapSize()}
>
+ {/**
+ * Waveform for podcasts is absolutely positioned at bottom of
+ * card, behind everything else
+ */}
+ {mainMedia?.type === 'Audio' && (
+
+
+ )}
{media && (
- {/**
- * Podcast waveform image is absolutely positioned at
- * bottom of card and appears behind everything else
- */}
- {mainMedia?.type === 'Audio' &&