[Brand Refactor] Card fixes

[danielguillan]

Summary

Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=209292904
Resolves https://github.com/orgs/github/projects/23995/views/5?pane=issue&itemId=196242231

Addresses 2 items of Card QA feedback from the Brand Refactor board: responsive cards now match the intended compact layout and cards no longer scale on hover.

List of notable changes:

• Exposes arrow CTA labels on devices without hover.
• Restores Card recipe gridlines on mobile and removes duplicate wrapper padding.
• Updates responsive Card padding
• Removes the Card scale transform globally while preserving CTA arrow animations.

What should reviewers focus on?

• Verify arrow CTA labels are visible on mobile and tablet devices without requiring hover.
• Verify stacked Card recipes retain their gridlines and use the expected compact spacing at narrow viewports.
• Verify Card icons render at the intended size and spacing on mobile.
• Verify cards do not scale on hover at desktop widths while the arrow CTA interaction remains intact.
• Check that desktop Card recipe spacing remains aligned after removing duplicate wrapper padding.

Steps to test:

Use the following Storybook links to verify the changes:

1. Stacked cards — mobile: verify the gridlines, 32px block / 20px inline padding, 44px × 44px icons, 24px icon spacing, and visible CTA labels.
2. Related content — mobile: verify the compact recipe layout without duplicate wrapper padding.
3. Arrow CTA with a long label — mobile: verify the CTA label is exposed without hover and remains contained.
4. Icon — desktop: hover the card and verify it does not scale.

Supporting resources (related issues, external links, etc):

• Responsive Card QA feedback
• Remove the Card scale hover effect

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change

[changeset-bot]

🦋 Changeset detected

Latest commit: c1f60cd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-primitives	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-mcp	Patch
@primer/brand-config	Patch
@primer/brand-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🟢 No design token changes found

[github-actions]

🟢 No unit test coverage changes found

All components and hooks with tests maintain the same coverage as the main branch.

[github-actions]

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	101.76 kB	101.76 kB	🟢 No change
UMD — full bundle (CSS)	67.61 kB	67.57 kB	✅ -39 B (-0.1%)
ESM — full bundle (JS + CSS)	1.59 MB	1.59 MB	⬆️ +17 B (+0.0%)
ESM — tree-shaken simple (Button)	70.85 kB	70.86 kB	⬆️ +15 B (+0.0%)
ESM — tree-shaken complex (ActionMenu)	79.81 kB	79.82 kB	⬆️ +15 B (+0.0%)

[github-actions]

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

[Copilot]

Pull request overview

This PR updates the Card component’s responsive layout and interaction styling to address QA feedback: tighter spacing on narrow viewports, arrow CTA labels visible on non-hover devices, and removal of the hover scale effect while keeping arrow CTA motion.

Changes:

• Adjust Card padding to be more compact on small screens, with desktop-specific inline padding.
• Rework arrow CTA label/arrow-only styling to expose labels on non-hover devices while preserving hover/focus animations on hover-capable devices.
• Update Card Storybook examples to remove wrapper padding now that spacing is handled by the component, and add a changeset entry.

Show a summary per file

File	Description
packages/react/src/Card/Cards.example.stories.tsx	Removes wrapper Box padding around Cards to avoid duplicate spacing in examples.
packages/react/src/Card/Card.module.css	Updates Card padding and arrow CTA hover/non-hover behavior; removes global hover scale effect.
packages/react/src/Card/Card.features.stories.tsx	Removes wrapper Box padding for stacked Cards in feature stories.
.changeset/tidy-cards-responsive.md	Documents the patch-level changes for release notes.

Review details

• Files reviewed: 4/8 changed files
• Comments generated: 1
• Review effort level: Low

[jesussandreas]

@danielguillan looks so much better.

one thing to note: do we want to expose the links when hover interactions are not available?

that's one of the recommendations i had, but how do you feel about that?

[danielguillan]

@jesussandreas Yes, that's already implemented. Check this example on a phone or tablet and you should see the label by default.

[rezrah]

Really nice approach @danielguillan. Is there anything else worth/capable of hoisting into this progressive enhancement query? Maybe you've already done that. Just a nice opportunity to clean this up more.

[danielguillan]

Good idea! There was more we could hoist. Updated.

[rezrah]

Works as expected. Love the opt-in for animation.

@danielguillan left some feedback around the interaction test.