Card: Add `variant="condensed"` for compact card layout by dylanatsmith · Pull Request #7923 · primer/react

dylanatsmith · 2026-06-04T14:40:49Z

Overview

Adds a variant="condensed" prop to the Card component that provides a compact layout:

Condensed spacing — tighter gap and padding using --stack-gap-condensed / --stack-padding-condensed
No icon background — removes the background container and fixed dimensions from Card.Icon
Smaller title — heading font-size reduced to 14px (--text-body-size-medium)

Screen.Recording.2026-06-04.at.16.36.16.mov

Changelog

New

Card now accepts variant="condensed" for a compact card layout

Changed

None

Removed

None

Rollout strategy

Patch release
Minor release
Major release
None

Testing & Reviewing

Unit tests added for the data-variant attribute on both slot-based and custom-content cards
CSS uses :where([data-variant='condensed']) scoped within module classes for zero-specificity styling

Merge checklist

The condensed variant uses tighter spacing, removes the icon background container, and renders a smaller (14px) title. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions · 2026-06-04T14:41:25Z

⚠️ 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.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

changeset-bot · 2026-06-04T14:45:33Z

🦋 Changeset detected

Latest commit: b6780ad

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

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

The icon sits beside the body with an 8px gap, while the heading, description, and metadata stay vertically stacked within the body. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

dylanatsmith · 2026-06-04T15:45:11Z

I notice some discrepancies with variant naming. Banner uses layout="compact" so we might want to implement that way instead? I have no preference, happy to follow the system convention.

Copilot

Pull request overview

This PR adds a new variant="condensed" option to the experimental Card component to support a more compact, list-friendly layout while keeping the existing default presentation unchanged.

Changes:

Added a variant prop to Card and surfaced it as data-variant on the root element.
Implemented condensed-layout styling in Card.module.css (spacing/layout, icon container behavior, and heading sizing).
Added unit tests and Storybook updates (playground control + a new “Condensed” feature story) plus a changeset for a minor release.

Show a summary per file

File	Description
packages/react/src/Card/Card.tsx	Adds `variant` prop (defaulting to `default`) and applies `data-variant` on the Card root for styling hooks.
packages/react/src/Card/Card.module.css	Adds new condensed variant rules affecting layout, spacing, icon container styling, and heading typography.
packages/react/src/Card/Card.test.tsx	Adds tests asserting `data-variant` behavior for default, condensed, and custom-content cards.
packages/react/src/Card/Card.stories.tsx	Adds a `variant` control to the Playground story so condensed can be previewed interactively.
packages/react/src/Card/Card.features.stories.tsx	Adds a dedicated “Condensed” feature story example.
.changeset/card-condensed-variant.md	Declares a minor release for the new `variant="condensed"` API.

Copilot's findings

Files reviewed: 6/6 changed files
Comments generated: 5

dylanatsmith · 2026-06-04T15:50:35Z

+  &[data-variant='condensed'] {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--stack-gap-condensed);
+
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-normal);
+  }


It's a bit of a misnomer but the normal padding variant applies padding: var(--stack-padding-spacious); and we need the 16px value.

  width: 100%;
  height: auto;
+
+  :where([data-variant='condensed']) & {


+  justify-content: flex-start;
  color: var(--fgColor-muted);
+
+  :where([data-variant='default']) & {


  display: grid;
  gap: var(--stack-gap-normal);
+
+  :where([data-variant='condensed']) & {


  color: var(--fgColor-default);
  margin: 0;
+
+  :where([data-variant='condensed']) & {


Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Prevents the variant styles from leaking into nested Cards rendered inside a condensed Card. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

jonrohan

Very Nice

liuliu-dev · 2026-06-04T17:15:49Z

I notice some discrepancies with variant naming. Banner uses layout="compact" so we might want to implement that way instead? I have no preference, happy to follow the system convention.

I'd lean toward layout="compact", it matches Banner/SelectPanel and describes the change more accurately.

liuliu-dev

❤️

dylanatsmith and others added 2 commits June 4, 2026 15:40

Add variant="condensed" prop to Card component

a6cd5d1

The condensed variant uses tighter spacing, removes the icon background container, and renders a smaller (14px) title. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Add changeset for Card condensed variant

52efe6b

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jun 4, 2026

Add condensed variant stories and set condensed padding to 16px

a01efee

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Scope Card icon container styles to default variant

5120895

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-7923 June 4, 2026 14:49 Abandoned

Left-align Card icon with heading in condensed variant

320f871

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-7923 June 4, 2026 14:57 Abandoned

Lay out condensed Card icon and body side by side

fe23eba

The icon sits beside the body with an 8px gap, while the heading, description, and metadata stay vertically stacked within the body. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-7923 June 4, 2026 15:03 Abandoned

Align condensed Card heading with the icon

dfecaee

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

dylanatsmith force-pushed the dylanatsmith/dats-card-compact branch from ba66ce3 to dfecaee Compare June 4, 2026 15:12

github-actions Bot temporarily deployed to storybook-preview-7923 June 4, 2026 15:13 Inactive

dylanatsmith deployed to github-pages June 4, 2026 15:24 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7923 June 4, 2026 15:24 Inactive

Nudge condensed Card heading up by 4px

09cdc32

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

dylanatsmith deployed to github-pages June 4, 2026 15:39 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7923 June 4, 2026 15:39 Inactive

dylanatsmith marked this pull request as ready for review June 4, 2026 15:42

dylanatsmith requested a review from a team as a code owner June 4, 2026 15:42

dylanatsmith requested review from Copilot and francinelucca June 4, 2026 15:42

Copilot started reviewing on behalf of dylanatsmith June 4, 2026 15:42 View session

Copilot AI reviewed Jun 4, 2026

View reviewed changes

dylanatsmith and others added 2 commits June 4, 2026 16:52

Scope condensed Card padding to default padding value

3d6f1a8

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Anchor condensed Card descendant selectors to .Card root

b6b38a2

Prevents the variant styles from leaking into nested Cards rendered inside a condensed Card. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-7923 June 4, 2026 16:01 Abandoned

dylanatsmith deployed to github-pages June 4, 2026 16:10 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7923 June 4, 2026 16:11 Inactive

liuliu-dev self-requested a review June 4, 2026 16:11

jonrohan approved these changes Jun 4, 2026

View reviewed changes

jonrohan added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Jun 4, 2026

primer deleted a comment from primer-integration Bot Jun 4, 2026

rename layout:compact, add vrt test for compact

9f314bc

liuliu-dev added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 4, 2026

liuliu-dev deployed to github-pages June 4, 2026 17:39 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-7923 June 4, 2026 17:40 Inactive

test(vrt): update snapshots

3999698

github-actions Bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Jun 4, 2026

primer Bot deployed to github-pages June 4, 2026 17:55 View deployment

github-actions Bot temporarily deployed to storybook-preview-7923 June 4, 2026 17:55 Inactive

liuliu-dev approved these changes Jun 4, 2026

View reviewed changes

francinelucca removed their request for review June 4, 2026 19:58

dylanatsmith enabled auto-merge June 5, 2026 11:21

primer Bot disabled auto-merge June 5, 2026 17:16

primer Bot enabled auto-merge June 5, 2026 17:17

primer Bot disabled auto-merge June 5, 2026 17:18

primer Bot enabled auto-merge June 5, 2026 17:18

Merge branch 'main' into dylanatsmith/dats-card-compact

b6780ad

dylanatsmith deployed to github-pages June 5, 2026 17:50 — with GitHub Actions View deployment

github-actions Bot deployed to storybook-preview-7923 June 5, 2026 17:51 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Card: Add `variant="condensed"` for compact card layout#7923

Card: Add `variant="condensed"` for compact card layout#7923
dylanatsmith wants to merge 13 commits into
mainfrom
dylanatsmith/dats-card-compact

dylanatsmith commented Jun 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 4, 2026

Uh oh!

changeset-bot Bot commented Jun 4, 2026 •

edited

Loading

Uh oh!

dylanatsmith commented Jun 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

dylanatsmith Jun 4, 2026

Uh oh!

jonrohan left a comment •

edited

Loading

Uh oh!

liuliu-dev commented Jun 4, 2026

Uh oh!

liuliu-dev left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

dylanatsmith commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

github-actions Bot commented Jun 4, 2026

⚠️ Action required

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

dylanatsmith commented Jun 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

dylanatsmith Jun 4, 2026

Choose a reason for hiding this comment

Uh oh!

jonrohan left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

liuliu-dev commented Jun 4, 2026

Uh oh!

liuliu-dev left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dylanatsmith commented Jun 4, 2026 •

edited

Loading

changeset-bot Bot commented Jun 4, 2026 •

edited

Loading

jonrohan left a comment •

edited

Loading