feat: card component by mnoleto · Pull Request #2647 · Frontify/fondue

mnoleto · 2026-03-05T08:27:57Z

🎯 What does this PR do?

Card component

Introduces the Card compound component built on CSS Grid, following the Fondue compound component pattern.

Component structure

Card.Root — grid container managing hover, selected, and focus states. Renders a or overlay for click/navigation behavior.
Card.Banner — top image area with small / large size variants
Card.BannerImage — single image with cover / contain fit
Card.BannerIcon — centered icon placeholder for empty states
Card.Badges — absolutely positioned badge slot in the banner top-right
Card.ThumbnailImage — brand logo in the thumbnail area
Card.ThumbnailIcon — icon in the thumbnail area (mutually exclusive with Logo)
Card.Title — truncated single-line title
Card.Description — secondary card description
Card.Action / Card.ActionButton — action button aligned to the card's right edge

The component is not yet publicly exported and is marked as in_progress in Storybook.

TODO:

improve the styles to match the design
clarify some things about the design:
- checkbox on hover
version with colors as banner image

🖼️ Figma
https://www.figma.com/design/vYLXkUhWGHIpEftV1zTpqI/Patterns-v1.0?node-id=2123-5667&p=f&m=dev

changeset-bot · 2026-03-05T08:28:02Z

🦋 Changeset detected

Latest commit: 2687885

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	Minor
@frontify/fondue	Minor
@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 · 2026-03-05T08:29:12Z

✅ Deploy Preview for fondue-docs ready!

Name	Link
🔨 Latest commit	`20c6b42`
🔍 Latest deploy log	https://app.netlify.com/projects/fondue-docs/deploys/69b964a21a302900076fff1a
😎 Deploy Preview	https://deploy-preview-2647.fondue-components.frontify.com
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2026-03-05T08:29:58Z

✅ Deploy Preview for fondue-components ready!

Name	Link
🔨 Latest commit	`2687885`
🔍 Latest deploy log	https://app.netlify.com/projects/fondue-components/deploys/69c657d209770c00081a203c
😎 Deploy Preview	https://deploy-preview-2647.components.fondue-components.frontify.com
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

packages/rte/src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts

- Change default banner size from 'small' to 'large' - Extract state-dependent styles into card-state mixin for default, hover, selected, and hover+selected states - Rename grid area 'icon' to 'thumbnail' for shared logo/icon slot - Replace hardcoded sizes with sizeToken utility - Use transitions.transition-colors mixin for consistent animations - Fix focus ring to use :has(> .overlay:focus-visible) instead of :focus-visible on non-focusable root div - Update storybook with 280px wrapper and rename WithLargeBanner to WithSmallBanner to reflect new default Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Update card styles to match Figma design tokens: replace hardcoded pixel values with sizeToken/spacing variables, use inset box-shadow for banner border, add surface-dim backgrounds, fix selection indicator states (hidden by default, visible on hover/selected), merge shared logo/icon styles, and add BannerFit story. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/components/src/components/Card/Card.tsx

noahwaldner · 2026-03-06T08:56:17Z

packages/components/src/components/Card/Card.tsx

+                        tabIndex={0}
+                        aria-label={ariaLabel}
+                        aria-describedby={ariaDescribedby}
+                        aria-current={selected ? 'true' : undefined}


is aria-current the right attribute for this? aria-selected might be a better choice

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-current

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-selected

aria-selected isn't valid on link or button roles. We need an explicit role that supports it.

noahwaldner · 2026-03-06T09:02:26Z

packages/components/src/components/Card/Card.tsx

+                        onKeyDown={handleKeyDown}
+                    />
+                ) : (
+                    <button


This is the focusable element for the card. When it is focused by a screen reader there is no information about the content of the card at all.

Maybe we should add the `Card.Title as a sr-only text inside of it

Great catch! Instead of duplicating the title as sr-only text inside the overlay (which could drift out of sync), we can use aria-labelledby to reference the Card.Title element directly. This way the overlay automatically picks up the title content as its accessible name, and if aria-label is explicitly provided it still takes precedence. The coordination between Card.Root and Card.Title will be handled via React useId()-generated id. What do you think?

packages/components/src/components/Card/Card.tsx

packages/components/src/components/Card/styles/card.module.scss

noahwaldner · 2026-03-06T09:32:42Z

Thank you very much for the PR! It's a great contribution!

…onent

noahwaldner

The file is pretty lengthy, can we split it up into multiple comonents and hooks to improve readability?

packages/components/src/components/Card/Card.tsx

noahwaldner · 2026-03-17T10:21:33Z

packages/components/src/components/Card/Card.tsx

+              selected?: never;
+          })
+        | {
+              href?: never;


why do we need this type that has never for all properties?

That's the non-interactive variant of the union. It ensures TypeScript errors if you pass href, onSelect, selected, aria-label, or aria-describedby to a static (non-interactive) card.

Without it, a consumer could write <Card.Root onSelect={...}> (no href) and TypeScript wouldn't complain — the union would just match the second variant (CardRootInteractiveProps & { onSelect?: never }) and silently ignore the invalid combination.

The three variants enforce:

href + onSelect + selected — interactive & selectable

href only — interactive, not selectable

None of the above — static card, no interactive props allowed

It's a standard discriminated union pattern for mutually exclusive prop groups.

packages/components/src/components/Card/Card.tsx

noahwaldner · 2026-03-17T10:28:22Z

packages/components/src/components/Card/Card.tsx

+                <a
+                    className={styles.overlay}
+                    href={href}
+                    tabIndex={0}


not needed as a <a> is focusable by default

side note. does this work well with react router? ideally most of the time we'd probably want to use a Link component from react router?

We have a <Link component in Fondue to be used instead of <a (we don't have dependencies on react-router)

@SamuelAlev Should I add useFondueRouter() integration for client-side routing?

I believe we should not use the Link component here. The Card already handles its own styling, disabled states, and ARIA attributes. The Card overlay is an invisible, full-surface anchor (position: absolute; inset: 0) — it has no visible text, no underline, no font styling. All the visual props Link provides (size, weight, color, underline, wrap) are irrelevant.

maybe just expose an onclick and a button not an a href?

@mnoleto Sure, but keep the <a so hovering the card shows the link in the browser (also allow to drag in a new tab, cmb+click to open in new tab, ...)

packages/components/src/components/Card/Card.stories.tsx

packages/components/src/components/Card/__tests__/Card.spec.tsx

packages/components/src/components/Card/Card.tsx

…onent

mnoleto · 2026-03-17T14:27:45Z

The file is pretty lengthy, can we split it up into multiple comonents and hooks to improve readability?

Done!

noahwaldner

Looks good!

Only left comments about the Storybook structure

packages/components/src/components/Card/Card.stories.tsx

…onent

SamuelAlev · 2026-03-26T14:23:50Z

packages/components/src/components/RouterProvider/RouterProvider.tsx

-    navigate: () => {
-        throw new Error('RouterProvider: `navigate` function is not implemented');
-    },
+    navigate: () => {},
    // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
-    useHref: () => {
-        throw new Error('RouterProvider: `useHref` function is not implemented');
-    },
+    useHref: (path: string) => path,


It is on purpose throwing an error, please keep it that way and add the provider in the renderer of Storybook/tests instead 🙏

Reverted the changes

@SamuelAlev Can we still use the useHref?

noahwaldner · 2026-03-26T14:25:58Z

@mnoleto can you please add the missing translations in the other languages?

… feat/card-component

github-actions · 2026-03-27T12:39:59Z

Lead time: 44 days, 23 hours, 13 minutes, 43 seconds (1079.23 total hours) from first commit to close.
Review time: 22 days, 4 hours, 11 minutes, 53 seconds (532.20 total hours) from ready for review to close.

First commit: 10.2.2026, 14:26:07.
Ready for review: 5.3.2026, 09:27:57.
Closed: 27.3.2026, 13:39:50.

mnoleto requested a review from SamuelAlev March 5, 2026 08:27

mnoleto requested a review from a team as a code owner March 5, 2026 08:27

mnoleto changed the title ~~Feat/card component~~ feat: card component Mar 5, 2026

mnoleto force-pushed the feat/card-component branch from 9a155cf to 9cf24ca Compare March 6, 2026 08:20

github-advanced-security bot found potential problems Mar 6, 2026

View reviewed changes

mnoleto and others added 5 commits March 6, 2026 09:22

feat:card component

74c0c7a

feat: improve card styles and storybook

eca59ec

chore: improve card stories

370da1a

mnoleto force-pushed the feat/card-component branch from 9cf24ca to 370da1a Compare March 6, 2026 08:22

noahwaldner self-requested a review March 6, 2026 08:26

fix: card button

8aa6e40

noahwaldner requested changes Mar 6, 2026

View reviewed changes

mnoleto added 10 commits March 6, 2026 12:08

chore: address pr comments

fe053eb

feat: update card component

b3033c5

chore: increase coverage and fix sonarcloud issues

77fdfad

feat: preserve card state then dropdown is open

6809511

feat: update banner icon size

2e3bd73

fix: lint

b6104b7

feat: show and hide checkbox based on events

cb99bb0

chore: add background to app version

fb08037

feat: improve card interactivity

bd16e87

Merge branch 'main' of github.com:Frontify/fondue into feat/card-comp…

c39bf1b

…onent

mnoleto requested a review from noahwaldner March 17, 2026 09:03

noahwaldner requested changes Mar 17, 2026

View reviewed changes

mnoleto added 2 commits March 17, 2026 15:26

chore: add colors variant

5c17f45

Merge branch 'main' of github.com:Frontify/fondue into feat/card-comp…

20c6b42

…onent

noahwaldner reviewed Mar 24, 2026

View reviewed changes

fulopdaniel mentioned this pull request Mar 25, 2026

fix(CI): some jobs are hanging Frontify/brand-sdk#1504

Merged

noahwaldner and others added 6 commits March 26, 2026 11:09

inline stories

a2d4459

chore: rename stories

63890b8

chore: inline components

9043c34

Merge branch 'main' of github.com:Frontify/fondue into feat/card-comp…

4f4b26a

…onent

chore: merge main and fix conflicts

8b10f07

rename stories

f62e3ff

SamuelAlev reviewed Mar 26, 2026

View reviewed changes

linting

3d21bf0

mnoleto added 2 commits March 27, 2026 09:40

chore: add translations and rever router changes

99791c1

Merge branch 'feat/card-component' of github.com:Frontify/fondue into…

ebafbc9

… feat/card-component

mnoleto requested review from SamuelAlev and noahwaldner March 27, 2026 08:42

mnoleto added 2 commits March 27, 2026 10:30

chore: improve design and add tooltip example

1e264e4

test: fix with router provider

2687885

noahwaldner approved these changes Mar 27, 2026

View reviewed changes

mnoleto merged commit 2ec59ab into main Mar 27, 2026
15 of 16 checks passed

mnoleto deleted the feat/card-component branch March 27, 2026 12:39

github-actions bot mentioned this pull request Mar 27, 2026

chore: release packages #2678

Open

Conversation

mnoleto commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Card component

Uh oh!

changeset-bot bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for fondue-docs ready!

Uh oh!

netlify bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for fondue-components ready!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

noahwaldner commented Mar 6, 2026

Uh oh!

noahwaldner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mnoleto commented Mar 17, 2026

Uh oh!

noahwaldner left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mnoleto commented Mar 5, 2026 •

edited

Loading

changeset-bot bot commented Mar 5, 2026 •

edited

Loading

netlify bot commented Mar 5, 2026 •

edited

Loading

netlify bot commented Mar 5, 2026 •

edited

Loading

SamuelAlev Mar 26, 2026 •

edited

Loading

mnoleto Mar 27, 2026 •

edited

Loading