Skip to content

Reduce blur height of blur on vertical feature cards#15245

Open
abeddow91 wants to merge 3 commits intomainfrom
ab/blur-podcast
Open

Reduce blur height of blur on vertical feature cards#15245
abeddow91 wants to merge 3 commits intomainfrom
ab/blur-podcast

Conversation

@abeddow91
Copy link
Contributor

@abeddow91 abeddow91 commented Jan 29, 2026

What does this change?

Updates the design of feature cards

  • Reduces the height of the blur on feature cards and 4:5 immersive cards from 64px to 36px. The blur on 5:4 immersive cards remains unchanged
  • Reduces the height of the podcast waveform from 64px to 40px

To account for this reduction in padding blur, the blur has been moved into its own div so that it does not apply to the content itself.

Why?

Design would like to obscure less of the image in order to better serve video in these cards.

Screenshots

Before After
before after

@github-actions
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@abeddow91 abeddow91 marked this pull request as draft January 29, 2026 13:54
@github-actions
Copy link

github-actions bot commented Jan 29, 2026

@abeddow91 abeddow91 added maintenance Departmental tracking: maintenance work, not a fix or a feature run_chromatic Runs chromatic when label is applied labels Jan 29, 2026
@abeddow91 abeddow91 self-assigned this Jan 29, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jan 29, 2026
@abeddow91 abeddow91 marked this pull request as ready for review February 2, 2026 08:56
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Feb 2, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 2, 2026
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Feb 2, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 2, 2026
@abeddow91 abeddow91 added the run_chromatic Runs chromatic when label is applied label Feb 2, 2026
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Feb 2, 2026
@abeddow91 abeddow91 requested a review from domlander February 2, 2026 09:48
padding: ${space[9]}px ${space[2]}px ${space[2]}px;

/*
* Ensure the waveform is behind the other elements, e.g. headline, pill.
Copy link
Contributor

Choose a reason for hiding this comment

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

The indentation here is a bit off

);
`;

const contentOverlayStyle = css`
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const contentOverlayStyle = css`
const contentOverlayStyles = css`

(isImmersive ? (
<Hide from="tablet">
{renderPodcastImage(
<div css={contentOverlayStyle}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this extra div needed?

left: 0;
z-index: 0;
height: 64px;
height: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it expected that immersive podcasts will also now use the shorter waveform?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fronts + curation maintenance Departmental tracking: maintenance work, not a fix or a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants