Hero component updates #1220

rezrah · 2026-01-14T14:30:11Z

Summary

Towards https://github.com/github/brand-marketing-design/issues/2606

Aligns the Hero component to the 2026 brand refresh.

🔗 Preview in Storybook

List of notable changes:

Applies (mostly) backwards compatible updates to the Hero
- New label style
- Smaller, muted description by default
Supplies new layouts that can be opted into (not backwards compatible)
- Hero variant featuring grid lines
- Inline and block layouts
- Slots for applying dither animations

What should reviewers focus on?

Review the 'default' Hero examples, and review whether the changes are in fact backwards compatible
Review design accuracy of the new Hero variants

Steps to test:

Go this storybook group and review each story
See the new variant Hero's in action here

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-01-14T14:30:15Z

🦋 Changeset detected

Latest commit: 7ba1e53

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	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	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 · 2026-01-14T14:32:33Z

🟢 No design token changes found

github-actions · 2026-01-14T14:34:42Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

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

Component/Hook	Statements	Functions	Branches	Change
`Hero`	~~96.0%~~ 97.7%	83.3%	92.0%	+1.7%

github-actions · 2026-01-14T14:35:41Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

…o-component-brand-refactor

Copilot

Pull request overview

This PR implements Hero component updates aligning with the 2026 brand refresh, introducing new visual variants, animation capabilities, and making several breaking API changes.

Changes:

Introduces new bordered-grid variant for Hero with grid lines and contained layout
Adds TextCursorAnimation component with cursor reveal effect for Hero labels
Implements new animation hooks (useReducedMotion, useCursorAnimation) and reveal-in-up animation
Refactors Hero component architecture with sub-components and context API
Updates Hero.Description and Hero.Label default styling (breaking changes)
Adds video poster support with play button overlay

Reviewed changes

Copilot reviewed 49 out of 146 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`.changeset/tiny-dingos-speak.md`	Documents breaking changes and new features for Hero component
`packages/react/src/Hero/Hero.tsx`	Major refactor with new variant system, context provider, and layout improvements
`packages/react/src/Hero/HeroContext.ts`	New context for managing Hero state and variants
`packages/react/src/Hero/sub-components/*`	New sub-component architecture for Hero elements
`packages/react/src/TextCursorAnimation/*`	New animated text cursor component
`packages/react/src/hooks/useReducedMotion.ts`	New hook for respecting user motion preferences
`packages/react/src/hooks/useCursorAnimation.ts`	New hook for cursor animation logic
`packages/react/src/animation/*`	Adds `reveal-in-up` animation and `immediate` trigger support
`packages/react/src/Hero/Hero.module.css`	Extensive CSS updates for new variants and layouts
`packages/react/src/recipes/*`	Updates to use new Hero API with backwards compatibility
`packages/react/src/Hero/Hero.test.tsx`	Updated tests with matchMedia mock for new hooks
`apps/next-docs/content/components/Hero/react.mdx`	Documentation updates for new props and features

Comments suppressed due to low confidence (2)

packages/react/src/Hero/Hero.module.css:223

According to the custom coding guidelines (ID: 1000000), hardcoded pixel values should not be used in CSS module files. The letter-spacing: 1px should be replaced with an appropriate design token.

  letter-spacing: 1px;

packages/react/src/Hero/Hero.module.css:106

According to the custom coding guidelines (ID: 1000000), hardcoded pixel values should not be used in CSS module files. The hardcoded 600px in calc(600px - var(--base-size-24)) should be replaced with an appropriate size token from the design tokens.

    min-height: calc(600px - var(--base-size-24));

Copilot · 2026-01-23T18:55:46Z

packages/react/src/Hero/Hero.module.css

+
 .Hero-description {
  margin: var(--base-size-24) 0 0;
  max-width: 600px;


According to the custom coding guidelines (ID: 1000000), hardcoded pixel values should not be used in CSS module files. The max-width: 600px should be replaced with an appropriate size token from the design tokens. Additionally, the letter-spacing: 1px on line 223 should also use a design token.

This issue also appears in the following locations of the same file:

line 223

line 106

Copilot · 2026-01-23T18:55:46Z

.changeset/tiny-dingos-speak.md

+
+#### Breaking Changes
+
+- **`Hero.Label`**: No longer extends `Label` component. It now renders as plan text with monospace font and in uppercase. Props like `size` and `color` are no longer supported.


There's a spelling error: "plan text" should be "plain text".

Suggested change

- **`Hero.Label`**: No longer extends `Label` component. It now renders as plan text with monospace font and in uppercase. Props like `size` and `color` are no longer supported.

- **`Hero.Label`**: No longer extends `Label` component. It now renders as plain text with monospace font and in uppercase. Props like `size` and `color` are no longer supported.

Copilot · 2026-01-23T18:55:46Z

packages/react/src/animation/Animation.module.css

+
+.Animation--reveal-in-up.Animation--active {
+  transform: translateY(0);
+  clip-path: inset(0 0 -0.2em 0); /* includs some offset to account for descenders  */


There's a spelling error in the comment: "includs" should be "includes".

Copilot · 2026-01-23T18:55:47Z

packages/react/src/hooks/useCursorAnimation.ts

+   * Loads after the page has fully loads
+   */
+  waitForPageLoad?: boolean


There's a grammatical error in the JSDoc comment: "Loads after the page has fully loads" should be "Loads after the page has fully loaded".

Copilot · 2026-01-23T18:55:47Z

packages/react/src/Hero/sub-components/HeroVideo.tsx

+  },
+)
+
+function PosterImage({posterSrc, posterAlt, posterTitle, onClick, className}) {


The PosterImage function parameters lack TypeScript type annotations. Consider adding proper types for posterSrc, posterAlt, posterTitle, onClick, and className parameters to maintain type safety and consistency with the rest of the codebase.

Copilot · 2026-01-23T18:55:47Z

packages/react/src/TextCursorAnimation/TextCursorAnimation.module.css

+  top: 50%;
+  transform: translateY(calc(-50% - 1px));
+  width: var(--base-size-8);
+  height: 11px;


According to the custom coding guidelines (ID: 1000000), hardcoded pixel values should not be used in CSS module files. Instead, use size tokens from the design tokens. The height: 11px should be replaced with an appropriate size token from packages/design-tokens/lib/design-tokens/css/tokens/base/size/size.css.

simmonsjenna · 2026-01-23T22:40:45Z

@rezrah For the full width variants that use video like Bordered grid variant (Block-end w/ video), can we implement two versions (may have missed the floating video version w/ grid; could only find the anchored / block-end w/ grid in Storybook):

Bordered grid variant (Floating video) [Has padding all around and all corners are rounded]

Contentful notes - which type of input field uses this variant - @rfearing:
- Embedded videos via a link field (e.g. YouTube video urls)
Bordered grid variant (Anchored video) [Has padding-bottom: 0 and only top two corners are rounded]

Contentful notes - which type of input field uses this variant - @rfearing:
- Uploaded custom video assets (e.g. our animated UI videos)

rezrah added 3 commits January 12, 2026 17:57

checkpoint

ab70ac8

refactor Hero component

7cf1697

add animation cursor thing

d04eb2e

rezrah temporarily deployed to github-pages January 14, 2026 14:33 — with GitHub Actions Inactive

fix litner

4f247c5

rezrah temporarily deployed to github-pages January 14, 2026 14:42 — with GitHub Actions Inactive

update snapshots

bed6b32

rezrah temporarily deployed to github-pages January 14, 2026 21:17 — with GitHub Actions Inactive

rezrah added 3 commits January 15, 2026 10:52

Merge branch 'main' of github.com:primer/brand into rezrah/update-her…

9c3c67d

…o-component-brand-refactor

change wipe-in-up to reveal-in-up

e37dd62

fix cursor positioning

b2f94d5

rezrah temporarily deployed to github-pages January 15, 2026 13:30 — with GitHub Actions Inactive

add enableAnimation prop

cc62bbf

rezrah temporarily deployed to github-pages January 15, 2026 16:13 — with GitHub Actions Inactive

add test-results to ignore list

0546785

rezrah temporarily deployed to github-pages January 15, 2026 16:21 — with GitHub Actions Inactive

qa adjustments

f391b1f

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

rezrah added 3 commits January 19, 2026 17:09

Merge branch 'main' of github.com:primer/brand into rezrah/update-her…

5f02df0

…o-component-brand-refactor

update snapshots

f0d4ec2

Merge branch 'main' of github.com:primer/brand into rezrah/update-her…

67fa7aa

…o-component-brand-refactor

rezrah temporarily deployed to github-pages January 20, 2026 10:39 — with GitHub Actions Inactive

improve error messaging

7faf012

rezrah temporarily deployed to github-pages January 20, 2026 15:44 — with GitHub Actions Inactive

increase ellipsis char count

c28aafd

rezrah temporarily deployed to github-pages January 20, 2026 16:09 — with GitHub Actions Inactive

increase timeout on recipe examples

56df457

rezrah temporarily deployed to github-pages January 21, 2026 10:22 — with GitHub Actions Inactive

rezrah added 3 commits January 23, 2026 16:04

add video poster feature

cc53f9b

Merge branch 'main' of github.com:primer/brand into rezrah/update-her…

9d19935

…o-component-brand-refactor

fix issues with container queries

7ba1e53

rezrah deployed to github-pages January 23, 2026 18:44 — with GitHub Actions View deployment

rezrah marked this pull request as ready for review January 23, 2026 18:49

rezrah requested a review from a team as a code owner January 23, 2026 18:49

Copilot AI review requested due to automatic review settings January 23, 2026 18:49

Copilot started reviewing on behalf of rezrah January 23, 2026 18:49 View session

Copilot AI reviewed Jan 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hero component updates #1220

Hero component updates #1220

Uh oh!

rezrah commented Jan 14, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Jan 14, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 14, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 14, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

Copilot AI Jan 23, 2026

Uh oh!

simmonsjenna commented Jan 23, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		#### Breaking Changes

		- `Hero.Label`: No longer extends `Label` component. It now renders as plan text with monospace font and in uppercase. Props like `size` and `color` are no longer supported.

Hero component updates #1220

Are you sure you want to change the base?

Hero component updates #1220

Uh oh!

Conversation

rezrah commented Jan 14, 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:

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot bot commented Jan 14, 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 Jan 14, 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 Jan 14, 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 Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No visual differences found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

simmonsjenna commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rezrah commented Jan 14, 2026 •

edited

Loading

changeset-bot bot commented Jan 14, 2026 •

edited

Loading

github-actions bot commented Jan 14, 2026 •

edited

Loading

github-actions bot commented Jan 14, 2026 •

edited

Loading

github-actions bot commented Jan 14, 2026 •

edited

Loading

simmonsjenna commented Jan 23, 2026 •

edited

Loading