Add inline `<code>` support to Card, Rver and CTA banner components by rezrah · Pull Request #1266 · primer/brand

rezrah · 2026-02-24T16:02:37Z

Summary

Adds support for <code> elements inside the headings for Card, CtaBanner and River per this design.

🔗 Cards preview
🔗 CTABanner preview
🔗 River preview

List of notable changes:

Adds basic support for <code>, which inherits the parent font-size
Adds dynamic line height to account for size overrides, but this isn't reliable. Guidance is to use default sizes.
Adds kitchen sink examples to Storybook

What should reviewers focus on?

If designs are accurate

Steps to test:

Use links at the top of this description

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

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

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

changeset-bot · 2026-02-24T16:02:47Z

🦋 Changeset detected

Latest commit: fcbb0e2

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

This PR includes changesets to release 8 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-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 · 2026-02-24T16:05:11Z

🟢 No design token changes found

github-actions · 2026-02-24T16:06:48Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 0 improved, 1 decreased

Component/Hook	Statements	Functions	Branches	Change
`CTABanner`	100.0%	100.0%	~~92.9%~~ 92.1%	-0.8%

github-actions · 2026-02-24T16:08:55Z

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

Copilot

Pull request overview

Adds support for inline <code> styling inside heading/description content for marketing components in @primer/react-brand, and documents the patterns via Storybook + visual regression snapshots.

Changes:

Add component-scoped CSS rules for inline <code> in Card, River, and CTABanner (font, background, padding, borders, and adjusted line-heights when code is present).
Update River heading rendering to add an inner wrapper class to target :has(code) styling.
Add Storybook “kitchen sink” stories and Playwright visual regression tests/snapshots for inline code scenarios (including custom size overrides).

Reviewed changes

Copilot reviewed 12 out of 20 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/src/river/river-shared.module.css.d.ts	Adds the new generated CSS module class key for `River__heading-inner`.
packages/react/src/river/river-shared.module.css	Adds inline `<code>` styling and conditional line-height adjustments for River headings/text.
packages/react/src/river/River/River.visual.spec.ts-snapshots/Visual-Comparison-River-River-With-Inline-Code-Element-Custom-Sizes-1-linux.png	Adds/updates River inline-code visual snapshot baseline.
packages/react/src/river/River/River.visual.spec.ts	Adds River visual regression coverage for inline-code stories.
packages/react/src/river/River/River.tsx	Adds `River__heading-inner` class to the heading element to enable conditional styling.
packages/react/src/river/River/River.features.stories.tsx	Adds River stories demonstrating inline `<code>` usage (including dark mode + custom sizes).
packages/react/src/Card/Card.visual.spec.ts-snapshots/Visual-Comparison-Card-Card-With-inline-code-element-non-standard-size-overrides-1-linux.png	Adds/updates Card inline-code visual snapshot baseline for size overrides.
packages/react/src/Card/Card.visual.spec.ts	Adds Card visual regression tests for inline-code stories.
packages/react/src/Card/Card.module.css	Adds inline `<code>` styling + conditional line-height adjustments for Card heading/description.
packages/react/src/Card/Card.features.stories.tsx	Adds Card stories demonstrating inline `<code>` across variants and size overrides.
packages/react/src/CTABanner/CTABanner.visual.spec.ts	Adds CTABanner visual regression coverage for inline-code story.
packages/react/src/CTABanner/CTABanner.tsx	Adds a backgroundColor-derived CSS class hook for inline code background overrides.
packages/react/src/CTABanner/CTABanner.module.css.d.ts	Adds the new generated CSS module class key for `CTABanner--bgColor-default`.
packages/react/src/CTABanner/CTABanner.module.css	Adds inline `<code>` styling + conditional line-height adjustments; adds bgColor-specific override.
packages/react/src/CTABanner/CTABanner.features.stories.tsx	Adds CTABanner stories demonstrating inline `<code>` across variants, backgrounds, and dark mode.
.changeset/sharp-kiwis-sneeze.md	Publishes a patch changeset describing the new inline `<code>` support.

Copilot · 2026-02-24T20:56:29Z

packages/react/src/river/river-shared.module.css

+@media screen and (min-width: 64rem) {
+  .River__heading-inner:has(code) {
+    line-height: calc(1lh * 2.1);
+  }
+}


This media query uses min-width: 64rem, but the same file already documents the “Large breakpoint and up” as 63.25rem and the design token breakpoint.large is 1012px (63.25rem). To keep breakpoint behavior consistent, update this query to 63.25rem (or reference the same large breakpoint value used elsewhere in this file).

packages/react/src/CTABanner/CTABanner.tsx

packages/react/src/river/River/River.features.stories.tsx

simmonsjenna

Only thing I noticed is for CTABanner - Balanced variant on mobile, the mobile value of 2lh on the is being overwritten by the desktop value of 2.8lh

Current screenshot:

Dismissing to unblock the PR. Requested feedback has been actioned.

danielguillan

LGTM!

…o-components

add inline code support to card, river and cta banner

2c5cde8

rezrah temporarily deployed to github-pages February 24, 2026 16:06 — with GitHub Actions Inactive

fix responsive behaviour

93788b0

rezrah temporarily deployed to github-pages February 24, 2026 16:19 — with GitHub Actions Inactive

apply design adjustments

bb2c814

rezrah temporarily deployed to github-pages February 24, 2026 17:53 — with GitHub Actions Inactive

add snapshots

9d98aae

rezrah changed the title ~~WIP: add inline code support to Card, Rver and CTA banner~~ Add inline <code> support to Card, Rver and CTA banner components Feb 24, 2026

rezrah temporarily deployed to github-pages February 24, 2026 20:42 — with GitHub Actions Inactive

rezrah requested review from danielguillan and simmonsjenna February 24, 2026 20:50

rezrah marked this pull request as ready for review February 24, 2026 20:51

rezrah requested a review from a team as a code owner February 24, 2026 20:51

Copilot AI review requested due to automatic review settings February 24, 2026 20:51

Copilot started reviewing on behalf of rezrah February 24, 2026 20:52 View session

Copilot AI reviewed Feb 24, 2026

View reviewed changes

simmonsjenna previously requested changes Feb 24, 2026

View reviewed changes

apply qa feedback

61cec1e

rezrah temporarily deployed to github-pages February 25, 2026 12:56 — with GitHub Actions Inactive

danielguillan approved these changes Feb 25, 2026

View reviewed changes

rezrah added 2 commits February 25, 2026 14:24

Merge branch 'main' of github.com:primer/brand into rezrah/add-code-t…

7973eb1

…o-components

fix merge conflict

fcbb0e2

rezrah deployed to github-pages February 25, 2026 15:59 — with GitHub Actions View deployment

rezrah merged commit b6966c8 into main Feb 25, 2026
23 of 24 checks passed

rezrah deleted the rezrah/add-code-to-components branch February 25, 2026 17:10

primer bot mentioned this pull request Feb 25, 2026

Release tracking #1247

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Add inline `<code>` support to Card, Rver and CTA banner components#1266

Add inline `<code>` support to Card, Rver and CTA banner components#1266
rezrah merged 7 commits intomainfrom
rezrah/add-code-to-components

rezrah commented Feb 24, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 24, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 24, 2026 •

edited

Loading

Example:

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 24, 2026

Uh oh!

Uh oh!

Uh oh!

simmonsjenna left a comment

Uh oh!

danielguillan left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

rezrah commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

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

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No design token changes found

Uh oh!

github-actions bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Unit test coverage changes found

Uh oh!

github-actions bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Visual differences found

Example:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 24, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

simmonsjenna left a comment

Choose a reason for hiding this comment

Uh oh!

danielguillan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rezrah commented Feb 24, 2026 •

edited

Loading

changeset-bot bot commented Feb 24, 2026 •

edited

Loading

github-actions bot commented Feb 24, 2026 •

edited

Loading

github-actions bot commented Feb 24, 2026 •

edited

Loading

github-actions bot commented Feb 24, 2026 •

edited

Loading