Hero component updates

[rezrah]

Summary

Towards https://github.com/github/brand-experience/issues/73

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
• Card now supports image in block-end position (Required for new hero example)
• Missing Box features and styles have been backfilled

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:

1. Go this storybook group and review each story
2. 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]

🦋 Changeset detected

Latest commit: a797437

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]

🟢 No design token changes found

[github-actions]

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

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

Component/Hook	Statements	Functions	Branches	Change
TextCursorAnimation	100.0%	100.0%	93.8%	NEW
Hero	96.0% 93.3%	83.3% 88.9%	92.1% 91.9%	+5.6%
Card	96.6%	100.0%	82.5% 88.0%	+5.5%

[github-actions]

🟢 No visual differences found

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

[danielguillan]

This looks really great! Just added some minor feedback.

Also, there seems to be an issue with the VideoPlayer controls overlapping on smaller viewports:

[danielguillan]

Great work! 🙌