diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 99f99755bc..b851476adf 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -37,6 +37,7 @@ import { CardPicture } from '../CardPicture';
import { Island } from '../Island';
import { LatestLinks } from '../LatestLinks.importable';
import { MediaDuration } from '../MediaDuration';
+import { MediaMeta } from '../MediaMeta';
import { Pill } from '../Pill';
import { Slideshow } from '../Slideshow';
import { SlideshowCarousel } from '../SlideshowCarousel.importable';
@@ -454,9 +455,14 @@ export const Card = ({
);
}
- // Check media type to determine if we should show a pill or media icon
+ /**
+ * Check media type to determine if pill, or article metadata & icon shown.
+ * Currently pills are only shown within beta containers.
+ */
const showPill =
- mainMedia?.type === 'Audio' || mainMedia?.type === 'Gallery';
+ isBetaContainer &&
+ mainMedia &&
+ (mainMedia.type === 'Audio' || mainMedia.type === 'Gallery');
const media = getMedia({
imageUrl: image?.src,
@@ -652,6 +658,12 @@ export const Card = ({
cardHasImage={!!image}
/>
) : null}
+ {!!mainMedia && mainMedia.type !== 'Video' && !showPill && (
+
+ )}
)}
@@ -893,6 +905,14 @@ export const Card = ({
cardHasImage={!!image}
/>
) : null}
+ {!!mainMedia &&
+ mainMedia.type !== 'Video' &&
+ !showPill && (
+
+ )}
)}