Skip to content

Card Pill #15285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abeddow91 merged 12 commits into from
Feb 11, 2026
Merged

Card Pill #15285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f15d20c
Add a CardPill component
abeddow91 Feb 3, 2026
78f6d82
Use CardPill on highlights card
abeddow91 Feb 3, 2026
e041c95
Use CardPill in Card and only display age when its a storylines card
abeddow91 Feb 3, 2026
9967b9a
Show a pill if it is a youtube atom feature card thats also a video page
abeddow91 Feb 3, 2026
2392c75
Use CardPill in CardFooter
abeddow91 Feb 3, 2026
e88105c
Move card pill decision into card footer
abeddow91 Feb 3, 2026
dd6ba80
Move card pill decision into card footer
abeddow91 Feb 3, 2026
39821a3
Do not show pill if the card is in a second onwards container in a ga…
abeddow91 Feb 3, 2026
edef446
Only pad top if its meta data
abeddow91 Feb 3, 2026
3cf9a99
Update stories
abeddow91 Feb 3, 2026
786c993
Use isLive property from main media to determine if the live video pi…
abeddow91 Feb 5, 2026
071727c
Remove default null from card pill so that the switch case is exhaust…
abeddow91 Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 18 additions & 118 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { css } from '@emotion/react';
import { isUndefined } from '@guardian/libs';
import { between, from, space, until } from '@guardian/source/foundations';
import { Hide, Link, SvgCamera } from '@guardian/source/react-components';
import { Hide, Link } from '@guardian/source/react-components';
import {
ArticleDesign,
type ArticleFormat,
Expand Down Expand Up @@ -337,14 +337,6 @@ const decideSublinkPosition = (
return alignment === 'vertical' ? 'inner' : 'outer';
};

const liveBulletStyles = css`
width: 9px;
height: 9px;
border-radius: 50%;
background-color: ${palette('--pill-bullet')};
margin-right: ${space[1]}px;
`;

export const Card = ({
linkTo,
format,
Expand Down Expand Up @@ -489,85 +481,6 @@ export const Card = ({
</Link>
);

const MediaOrNewsletterPill = () => (
<div
css={css`
margin-top: auto;
display: flex;
${isStorylines &&
`
flex-direction: column;
gap: ${space[1]}px;
align-items: flex-start;
`}
`}
>
{/* Usually, we either display the pill or the footer,
but if the card appears in the storylines section on tag pages
then we do want to display the date on these cards as well as the media pill.
*/}
{isStorylines && (
<CardFooter
format={format}
age={decideAge()}
commentCount={<CommentCount />}
cardBranding={
isOnwardContent ? <LabsBranding /> : undefined
}
showLivePlayable={showLivePlayable}
/>
)}

{mainMedia?.type === 'YoutubeVideo' && isVideoArticle && (
<>
{mainMedia.isLive ? (
<Pill
content="Live"
icon={<div css={liveBulletStyles} />}
/>
) : (
<Pill
content={secondsToDuration(mainMedia.duration)}
icon={<SvgMediaControlsPlay width={18} />}
prefix="Video"
/>
)}
</>
)}
{mainMedia?.type === 'Audio' && (
<Pill
content={mainMedia.duration}
icon={<SvgMediaControlsPlay width={18} />}
prefix="Podcast"
/>
)}
{mainMedia?.type === 'Gallery' && (
<Pill
content={mainMedia.count}
icon={<SvgCamera />}
prefix="Gallery"
/>
)}
{mainMedia?.type === 'SelfHostedVideo' &&
(format.design === ArticleDesign.Video ? (
<Pill
content=""
icon={<SvgMediaControlsPlay width={18} />}
prefix="Video"
/>
) : format.design === ArticleDesign.Audio ? (
<Pill
content=""
icon={<SvgMediaControlsPlay width={18} />}
prefix="Podcast"
/>
) : format.design === ArticleDesign.Gallery ? (
<Pill content="" icon={<SvgCamera />} prefix="Gallery" />
) : null)}
{isNewsletter && <Pill content="Newsletter" />}
</div>
);

if (snapData?.embedHtml) {
return (
<SnapCssSandbox snapData={snapData}>
Expand All @@ -594,8 +507,6 @@ export const Card = ({
- */
const isMediaCardOrNewsletter = isMediaCard(format) || isNewsletter;

const showPill = isMediaCardOrNewsletter && !isGallerySecondaryOnward;

const media = getMedia({
imageUrl: image?.src,
imageAltText: image?.altText,
Expand Down Expand Up @@ -1300,32 +1211,22 @@ export const Card = ({
/>
)}

{!isOpinionCardWithAvatar && (
<>
{showPill ? (
<>
{!!branding &&
format.theme ===
ArticleSpecial.Labs &&
isOnwardContent && (
<LabsBranding />
)}
<MediaOrNewsletterPill />
</>
) : (
<CardFooter
format={format}
age={decideAge()}
commentCount={<CommentCount />}
cardBranding={
isOnwardContent ? (
<LabsBranding />
) : undefined
}
showLivePlayable={showLivePlayable}
/>
)}
</>
{!isOpinionCardWithAvatar && !showLivePlayable && (
<CardFooter
format={format}
age={decideAge()}
commentCount={<CommentCount />}
cardBranding={
isOnwardContent ? (
<LabsBranding />
) : undefined
}
mainMedia={
!isGallerySecondaryOnward
? mainMedia
: undefined
}
/>
)}
{showLivePlayable &&
liveUpdatesPosition === 'inner' && (
Expand Down Expand Up @@ -1410,12 +1311,11 @@ export const Card = ({

{decideOuterSublinks()}

{isOpinionCardWithAvatar && (
{isOpinionCardWithAvatar && !showLivePlayable && (
<CardFooter
format={format}
age={decideAge()}
commentCount={<CommentCount />}
showLivePlayable={showLivePlayable}
shouldReserveSpace={{
mobile: avatarPosition.mobile === 'bottom',
desktop: avatarPosition.desktop === 'bottom',
Expand Down
9 changes: 8 additions & 1 deletion dotcom-rendering/src/components/Card/components/CardFooter.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export const WithAge = {
design: ArticleDesign.Comment,
theme: Pillar.Opinion,
},
showLivePlayable: false,
age: <p>19h ago</p>,
},
} satisfies Story;
Expand Down Expand Up @@ -56,7 +55,15 @@ export const WithVideo = {
...WithAge.args,
mainMedia: {
type: 'YoutubeVideo',
id: 'abcdef',
videoId: 'abcd',
title: 'some title',
duration: 972,
width: 480,
height: 288,
origin: 'The Guardian',
expired: false,
image: 'https://i.guim.co.uk/img/media/e060e9b7c92433b3dfeccc98b9206778cda8b8e8/0_180_6680_4009/master/6680.jpg?width=600&quality=45&dpr=2&s=none',
},
},
} satisfies Story;
Expand Down
84 changes: 31 additions & 53 deletions dotcom-rendering/src/components/Card/components/CardFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,14 @@ import {
space,
textSansBold12,
} from '@guardian/source/foundations';
import { SvgCamera } from '@guardian/source/react-components';
import { Pill } from '../../../components/Pill';
import { SvgMediaControlsPlay } from '../../../components/SvgMediaControlsPlay';
import { type ArticleFormat, ArticleSpecial } from '../../../lib/articleFormat';
import { secondsToDuration } from '../../../lib/formatTime';
import type { MainMedia } from '../../../types/mainMedia';
import { CardPill } from '../../CardPill';

const contentStyles = css`
margin-top: auto;
padding-top: ${space[1]}px;
display: flex;
justify-content: 'flex-start';
justify-content: flex-start;
width: fit-content;
align-items: center;
${textSansBold12}
Expand All @@ -40,6 +37,10 @@ const contentStyles = css`
}
`;

const contentTopPaddingStyles = css`
padding-top: ${space[1]}px;
`;

const reserveSpaceStyles = (mobile: boolean, desktop: boolean) => css`
min-height: ${mobile ? '14px' : 0};

Expand All @@ -52,89 +53,66 @@ const labStyles = css`
margin-top: ${space[1]}px;
`;

type MainMedia =
| { type: 'YoutubeVideo'; duration: number }
| { type: 'SelfHostedVideo'; duration: number }
| { type: 'Audio'; duration: string }
| { type: 'Gallery'; count: string };

type Props = {
format: ArticleFormat;
showLivePlayable: boolean;
age?: JSX.Element;
commentCount?: JSX.Element;
cardBranding?: JSX.Element;
mainMedia?: MainMedia;
isNewsletter?: boolean;
shouldReserveSpace?: { mobile: boolean; desktop: boolean };
isStorylines?: boolean;
};

export const CardFooter = ({
format,
showLivePlayable,
age,
commentCount,
cardBranding,
mainMedia,
isNewsletter,
shouldReserveSpace,
isStorylines,
}: Props) => {
if (showLivePlayable) return null;
const shouldShowBranding =
format.theme === ArticleSpecial.Labs && !!cardBranding;

if (format.theme === ArticleSpecial.Labs && cardBranding) {
return <footer css={labStyles}>{cardBranding}</footer>;
}
const shouldShowPill =
mainMedia?.type === 'YoutubeVideo' ||
mainMedia?.type === 'Audio' ||
mainMedia?.type === 'Gallery' ||
isNewsletter;

if (mainMedia?.type === 'YoutubeVideo') {
if (shouldShowPill) {
return (
<footer css={contentStyles}>
<Pill
content={
<time>{secondsToDuration(mainMedia.duration)}</time>
}
prefix="Video"
icon={<SvgMediaControlsPlay width={18} />}
/>
</footer>
);
}
{shouldShowBranding && cardBranding}

if (mainMedia?.type === 'Audio') {
return (
<footer css={contentStyles}>
<Pill
content={<time>{mainMedia.duration}</time>}
prefix="Podcast"
icon={<SvgMediaControlsPlay width={18} />}
/>
</footer>
);
}
{/**
* Usually, we either display the pill or the footer,
* but if the card appears in the storylines section on tag pages
* then we do want to display the date on these cards as well as the media pill.
* */}
{isStorylines && age}

if (mainMedia?.type === 'Gallery') {
return (
<footer css={contentStyles}>
<Pill
content={mainMedia.count}
prefix="Gallery"
icon={<SvgCamera />}
<CardPill
mainMedia={mainMedia}
isNewsletter={isNewsletter}
format={format}
/>
</footer>
);
}

if (isNewsletter) {
return (
<footer css={contentStyles}>
<Pill content="Newsletter" />
</footer>
);
if (shouldShowBranding) {
Copy link
Copy Markdown
Contributor

@domlander domlander Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This if condition has moved down, so if shouldShowPill and shouldShowBranding are true, we'll now show the pill instead of the branding. Is this expected?

Copy link
Copy Markdown
Contributor Author

@abeddow91 abeddow91 Feb 11, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good question. Based on the current logic, I believe the behaviour is correct.

Previously, the only place where orchestration between the pill and branding existed was within Card. The logic that determined which footer variant to render lived here

dotcom-rendering/dotcom-rendering/src/components/Card/Card.tsx

Lines 1305 to 1329 in 693f504

{showPill ? (
<>
{!!branding &&
format.theme ===
ArticleSpecial.Labs &&
isOnwardContent && (
<LabsBranding />
)}
<MediaOrNewsletterPill />
</>
) : (
<CardFooter
format={format}
age={decideAge()}
commentCount={<CommentCount />}
cardBranding={
isOnwardContent ? (
<LabsBranding />
) : undefined
}
showLivePlayable={showLivePlayable}
/>
)}
</>
)}

The logic being:
If a pill should be shown, it took precedence and was rendered, with an optional branding logo.
Otherwise, the standard was rendered, with optional branding provided.

Although CardFooter is used in three other places (once more in Card, once in FeatureCard, and once in YoutubeAtomFeatureCardOverlay), none of those instances provide both branding and a pill at the same time.

return <footer css={labStyles}>{cardBranding}</footer>;
}

return (
<footer
css={[
contentStyles,
contentTopPaddingStyles,
shouldReserveSpace &&
reserveSpaceStyles(
shouldReserveSpace.mobile,
Expand Down
Loading
Loading