Add Card component

[liuliu-dev]

Upstream the Card component from Pacer into @primer/react.

Issue: https://github.com/github/primer/issues/6467

Changelog

New

• Card — A styled container component with border, box-shadow, and border-radius; also supports custom content without subcomponents (plain container mode)
• Card.Icon — Renders a decorative icon in the card header (defaults to aria-hidden, supports aria-label for meaningful icons)
• Card.Image — Renders an edge-to-edge image in the card header
• Card.Heading — Renders a heading (defaults to h3, configurable via as prop)
• Card.Description — Renders a description below the heading
• Card.Menu — Slot for overlay menu (positioned absolute top-right)
• Card.Metadata — Renders metadata content below the description

Changed

• Playground Storybook story updated with boolean toggle controls for Card.Icon and Card.Metadata
• CustomContent Storybook story added to demonstrate using Card as a plain styled container with arbitrary children (no subcomponents)

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 375b519

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[liuliu-dev]

Hey @lukasoppermann @ericwbailey 👋
Would love a design and a11y review for this Card component. Storybook preview is available on the PR deployment. Happy to iterate on feedback!

[ericwbailey]

Can't speak to the code or overall plan, but some high-level considerations that we'll have to contend with at some point:

Card.Heading — Renders a heading (h3) with truncation

• We'll want to make h3 able to accept multiple heading levels, in order to better integrate with the existing view heading structure. We can default to h3.
• Truncation is an accessibility antipattern that represents non-trivial MAS risk and we'll want to remove.

Card.Icon — Renders an icon in the card header

• We'll want to make this default to a decorative icon, with the option to add an alternate description if needed.

Card.Description — Renders a description with 2-line clamp

• Like the heading, truncation is an accessibility antipattern that represents non-trivial MAS risk and we'll want to remove.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[liuliu-dev]

Thanks for the review @ericwbailey! Addressed:

• Heading: supported via as prop (defaults to h3)
• Truncation: removed from both heading and description, long heading/ description will wrap
• Icon: now defaults to decorative (aria-hidden), with optional aria-label

[lukasoppermann]

@copilot in the Playground storybook story, add toggles for the icon <Card.Icon> and the <Card.Metadata>.

Also add a story that does not use any of the internal components and just adds some custom content to the card

[lukasoppermann]

@liuliu-dev design wise:

• heading, please use --text-title-shorthand-small
• for body copy: --text-body-shorthand-medium
• for the gap please use a variable from the stack: https://primer.style/product/primitives/size/#stack

I think we can remove the fallback values, they are not needed and don't exist anymore.

[Copilot]

@copilot in the Playground storybook story, add toggles for the icon <Card.Icon> and the <Card.Metadata>.

Also add a story that does not use any of the internal components and just adds some cu...

Done in 375b519.

• Playground: Added boolean toggle controls (showIcon and showMetadata) via argTypes, both defaulting to true. Toggling them off removes the respective Card.Icon / Card.Metadata from the rendered story.
• CustomContent: Added a new story that places a custom <div> with a heading, paragraph and list directly inside <Card> — no Card.* subcomponents used at all.
• Component: Updated Card to detect when no slot children are present and render children directly, so the CustomContent story (and any consumer using Card as a plain styled container) works correctly.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• example.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1194/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1194/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate,RenderD (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1194/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1194/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AvoidUnnecessaryBeforeUnloadCheckSync,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate,RenderD -main/dist/gh-gpgsign/gh-gpgsign-linux-x86_64 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[lukasoppermann]

@liuliu-dev should we tie the padding to the content-top, instead of icon bottom?

[github-actions]

Uh oh! @lukasoppermann, at least one image you shared is missing helpful alt text. Check #7723 (comment) to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 3

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[lukasoppermann]

This is also a use case: https://primer-1b76de82d9-13348165.drafts.github.io/storybook/?path=/story/components-card--custom-content

I am wondering if we should expect users to "bring their own padding" or if we should have a padding inside the card by default and a prop or a way to easily remove the default padding? CC: @siddharthkp ?

[github-actions]

Uh oh! @lukasoppermann, at least one image you shared is missing helpful alt text. Check #7723 (comment) to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 3

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[ericwbailey]

Thanks for the review @ericwbailey! Addressed:

Amazing! Thank you so much!