Skip to content

fix: card component border#2686

Merged
SamuelAlev merged 4 commits intomainfrom
fix/card-component-style
Apr 13, 2026
Merged

fix: card component border#2686
SamuelAlev merged 4 commits intomainfrom
fix/card-component-style

Conversation

@mnoleto
Copy link
Copy Markdown
Contributor

@mnoleto mnoleto commented Apr 10, 2026

Summary

  • Move the Card component's border from a CSS border on .root to an outline on a ::after pseudo-element, so the border renders inside the card's box without increasing its dimensions on hover/selection
  • The ::after overlay sits above the banner (z-index: 1), ensuring the border is visible over banner images
  • The selected state's inner ring uses an inset box-shadow on the same ::after pseudo-element

Problem

The Card used a regular CSS border which painted outside the content box, causing the card to grow by 1px on each side when transitioning from idle (transparent border) to hover/selected (visible border). This resulted in a visible layout shift.

@mnoleto mnoleto requested a review from SamuelAlev April 10, 2026 14:19
@mnoleto mnoleto requested a review from a team as a code owner April 10, 2026 14:19
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 10, 2026

🦋 Changeset detected

Latest commit: 4734d90

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

This PR includes changesets to release 3 packages
Name Type
@frontify/fondue-components Patch
@frontify/fondue Patch
@frontify/fondue-rte 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

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 10, 2026

Deploy Preview for fondue-components ready!

Name Link
🔨 Latest commit 4734d90
🔍 Latest deploy log https://app.netlify.com/projects/fondue-components/deploys/69dc9c75e271b9000821bbd7
😎 Deploy Preview https://deploy-preview-2686.components.fondue-components.frontify.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@mnoleto mnoleto enabled auto-merge (squash) April 13, 2026 07:34
@SamuelAlev SamuelAlev disabled auto-merge April 13, 2026 07:41
@SamuelAlev SamuelAlev merged commit 3f56c07 into main Apr 13, 2026
12 checks passed
@SamuelAlev SamuelAlev deleted the fix/card-component-style branch April 13, 2026 07:41
@github-actions
Copy link
Copy Markdown
Contributor

Lead time: 2 days, 17 hours, 25 minutes, 32 seconds (65.43 total hours) from first commit to close.
Review time: 2 days, 17 hours, 22 minutes, 38 seconds (65.38 total hours) from ready for review to close.

  • First commit: 10.4.2026, 16:16:18.
  • Ready for review: 10.4.2026, 16:19:12.
  • Closed: 13.4.2026, 09:41:50.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants