Skip to content

Commit a7c0da0

Browse files
EbonsignoriCopilot
Ebonsignori
and
Copilot
authored
Migrate Hero to @primer/react-brand + lighter docs page-header (#6681) (#62085)
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
1 parent d0bb839 commit a7c0da0

5 files changed

Lines changed: 94 additions & 280 deletions

File tree

‎src/landings/components/HomePageHero.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
// Applied to the brand Hero's root <section>. The hero background image is
2+
// baked in here (not a Hero.Image visual slot), so these rules must stay.
13
.section {
24
height: 21rem;
5+
// Brand Hero's root is display:flex/column but defaults to top alignment;
6+
// restore the vertical centering the old `flex-justify-center` provided.
7+
justify-content: center;
38
background-image: image-set(
49
url("/assets/images/banner-images/hero-home.webp") type("image/webp"),
510
url("/assets/images/banner-images/hero-home.png") type("image/png")
@@ -14,6 +19,7 @@
1419
line-height: 1.2;
1520
}
1621

22+
// Frosted-glass panel keeping heading/lede readable over the background image.
1723
.content {
1824
backdrop-filter: blur(1rem);
1925
background-color: color-mix(

‎src/landings/components/HomePageHero.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Hero } from '@primer/react-brand'
12
import { useTranslation } from '@/languages/components/useTranslation'
23
import styles from './HomePageHero.module.scss'
34
import cx from 'classnames'
@@ -6,21 +7,15 @@ export const HomePageHero = () => {
67
const { t } = useTranslation(['header', 'homepage'])
78

89
return (
9-
<section
10+
<Hero
1011
id="landing"
11-
className={cx(
12-
'border-bottom color-border-muted color-bg-subtle',
13-
'd-flex flex-justify-center flex-column',
14-
'text-center',
15-
styles.section,
16-
)}
12+
align="center"
13+
className={cx('border-bottom color-border-muted color-bg-subtle', styles.section)}
1714
>
1815
<div className={cx('mx-auto px-4 rounded-3', styles.content)}>
19-
<h1 id="title-h1" className="text-semibold">
20-
{t('github_docs')}
21-
</h1>
22-
<p className="f3 color-fg-muted">{t('description')}</p>
16+
<Hero.Heading>{t('github_docs')}</Hero.Heading>
17+
<Hero.Description>{t('description')}</Hero.Description>
2318
</div>
24-
</section>
19+
</Hero>
2520
)
2621
}

‎src/landings/components/shared/LandingCarousel.module.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
.carousel {
22
margin-top: 3rem;
3+
padding-bottom: 3rem;
4+
// Frame the section against the one below it (Docs 2026 "framed sections",
5+
// #6681). Matches the hero band's divider — brand border-subtle adapts
6+
// gray-2 light / gray-6 dark.
7+
border-bottom: 1px solid var(--brand-color-border-subtle);
38
--carousel-transition-duration: 0.1s;
49

510
// Subsequent carousels with headings get reduced margin

‎src/landings/components/shared/LandingHero.module.scss‎

Lines changed: 44 additions & 225 deletions
Original file line numberDiff line numberDiff line change
@@ -1,245 +1,64 @@
1+
// Lightweight docs page-header (Docs 2026, #6681). A left-aligned bordered
2+
// band — brand Heading + muted Text intro + a Button group — over the classic
3+
// right-anchored hero banner art. The bottom border (brand border-subtle, which
4+
// adapts gray-2 light / gray-6 dark) frames it against the section below,
5+
// matching the Figma "framed sections" treatment. Horizontal inset comes from
6+
// the wrapping container-xl so the header aligns with the sections below at
7+
// every width.
18
.landingHero {
2-
position: relative;
39
display: flex;
4-
align-items: center;
5-
padding: 4rem 0;
6-
background-color: var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa));
7-
background-size: cover;
8-
background-position: center center;
9-
background-repeat: no-repeat;
10-
overflow: hidden;
11-
height: 28rem;
12-
width: 100%;
13-
}
14-
15-
.heroContent {
16-
position: relative;
17-
width: 50rem;
18-
max-width: 50rem;
19-
padding: 0 7rem;
20-
display: flex;
21-
align-items: center;
22-
}
23-
24-
.heroText {
25-
text-align: left;
10+
flex-direction: column;
11+
gap: 1rem;
12+
align-items: flex-start;
13+
padding: 2rem 0 2.5rem;
2614
width: 100%;
15+
border-bottom: 1px solid var(--brand-color-border-subtle);
16+
// Hero banner art is right-anchored isometric artwork on a transparent
17+
// field. `auto 100%` scales it to the band's own (content-driven) height so
18+
// the header keeps its lighter Docs 2026 proportions instead of growing to
19+
// fit the art; pinned to the right edge, leaving the left clear for the
20+
// heading/intro/actions stacked on top.
21+
background-size: auto 100%;
22+
background-position: center right;
23+
background-repeat: no-repeat;
24+
// Anchor the art to the true right edge (the border box) so the right-side
25+
// text gutter added below insets only the heading/intro, not the artwork.
26+
background-origin: border-box;
2727
}
2828

29+
// Brand `Heading size="2"` owns the type scale (40px desktop, per Figma);
30+
// this only adds an optical max-width so long titles wrap before the edge.
2931
.heroHeading {
30-
font-size: 4rem;
31-
font-weight: 600;
32-
line-height: 1.2;
33-
margin: 0 0 1rem 0;
34-
color: var(--fgColor-default, var(--color-fg-default, #1f2328));
32+
margin: 0;
3533
max-width: 48rem;
3634
}
3735

36+
// Wraps the RenderedHTML intro (kept as raw HTML rather than a Text `as="p"`,
37+
// which can't hold block-level intro markup). Brand `Text size="200" muted`
38+
// owns the type/color (16px, per Figma); this only bounds the line length.
3839
.heroDescription {
39-
font-size: 1.25rem;
40-
line-height: 1.5;
41-
color: var(--fgColor-muted, var(--color-fg-muted, #656d76));
42-
margin: 0 0 2rem 0;
43-
max-width: 36rem;
44-
}
45-
46-
.heroActions {
47-
display: flex;
48-
gap: 1rem;
49-
flex-wrap: wrap;
50-
}
51-
52-
.heroAction {
53-
display: inline-flex;
54-
align-items: center;
55-
justify-content: center;
56-
padding: 0.75rem 1.5rem;
57-
border-radius: 6px;
58-
font-weight: 500;
59-
text-decoration: none;
60-
transition: all 0.2s ease;
61-
min-height: 2.75rem;
62-
border: 1px solid transparent;
63-
}
64-
65-
.heroPrimaryAction {
66-
background-color: var(
67-
--bgColor-success-emphasis,
68-
var(--color-btn-primary-bg, #1f883d)
69-
);
70-
color: var(--fgColor-onEmphasis, var(--color-btn-primary-text, #ffffff));
71-
border-color: var(
72-
--borderColor-success-emphasis,
73-
var(--color-btn-primary-border, #1f883d)
74-
);
75-
76-
&:hover {
77-
background-color: var(
78-
--bgColor-success-emphasis,
79-
var(--color-btn-primary-hover-bg, #1a7f37)
80-
);
81-
border-color: var(
82-
--borderColor-success-emphasis,
83-
var(--color-btn-primary-hover-border, #1a7f37)
84-
);
85-
text-decoration: none;
86-
}
87-
88-
&:focus {
89-
outline: 2px solid
90-
var(
91-
--borderColor-success-emphasis,
92-
var(--color-btn-primary-focus, #1f883d)
93-
);
94-
outline-offset: 2px;
95-
}
96-
}
97-
98-
.heroSecondaryAction {
99-
background-color: transparent;
100-
color: var(--fgColor-default, var(--color-fg-default, #1f2328));
101-
102-
@media (max-width: 865px) {
103-
background-color: var(
104-
--bgColor-muted,
105-
var(--color-canvas-subtle, #f6f8fa)
106-
) !important;
107-
}
108-
109-
border-color: var(
110-
--borderColor-default,
111-
var(--color-border-default, #d1d9e0)
112-
);
113-
114-
&:hover {
115-
background-color: var(--bgColor-muted, var(--color-canvas-subtle, #f3f4f6));
116-
border-color: var(
117-
--borderColor-default,
118-
var(--color-border-default, #d1d9e0)
119-
);
120-
text-decoration: none;
121-
}
122-
123-
&:focus {
124-
outline: 2px solid
125-
var(--borderColor-accent-emphasis, var(--color-accent-emphasis, #0969da));
126-
outline-offset: 2px;
127-
}
40+
margin: 0;
41+
max-width: 48rem;
12842
}
12943

13044
@media (max-width: 865px) {
13145
.landingHero {
132-
height: auto;
133-
min-height: 28rem;
134-
flex-direction: column;
135-
text-align: center;
136-
justify-content: flex-start;
137-
padding-top: 3rem;
138-
background-color: var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa));
139-
position: relative;
140-
141-
background-position: center right;
142-
}
143-
144-
.heroContent {
145-
width: 100%;
146-
order: 2;
147-
padding: 1rem;
148-
position: relative;
149-
z-index: 1;
150-
backdrop-filter: blur(1rem);
151-
background-color: color-mix(
152-
in srgb,
153-
var(--color-canvas-subtle) 70%,
154-
transparent
155-
);
156-
border-radius: 12px;
157-
margin: 0 1rem;
158-
}
159-
160-
.heroHeading {
161-
font-size: 3rem;
162-
}
163-
164-
.heroDescription {
165-
font-size: 1.1rem;
166-
}
167-
168-
.heroActions {
169-
flex-direction: column;
170-
justify-content: center;
171-
align-items: center;
172-
}
173-
174-
.heroAction {
175-
width: auto;
176-
min-width: 12rem;
177-
}
178-
179-
.heroText {
180-
display: flex;
181-
flex-direction: column;
182-
align-items: center;
183-
text-align: center;
46+
padding: 1.5rem 0 2rem;
47+
// Drop the banner art on narrow viewports where it would collide with the
48+
// text; the header falls back to the plain bordered band.
49+
background-image: none !important;
18450
}
18551
}
18652

187-
@media (max-width: 480px) {
53+
// Where the art IS shown, reserve a right-side gutter so the text column wraps
54+
// before it reaches the artwork. Without this, the 48rem text block overlaps
55+
// the right-anchored isometric art in the ~866–1130px band, dropping the muted
56+
// intro to ~1.2:1 over the orange/pink fill (WCAG 1.4.3 AA fail). The art is
57+
// pinned to the border box (background-origin above), so this padding insets
58+
// only the text, not the artwork. 22rem clears the opaque art (~300px) plus a
59+
// gap at every width in the band.
60+
@media (min-width: 866px) {
18861
.landingHero {
189-
height: auto;
190-
min-height: 28rem;
191-
background-color: var(--bgColor-muted, var(--color-canvas-subtle, #f6f8fa));
192-
flex-direction: column;
193-
text-align: center;
194-
padding: 3rem 0 1rem;
195-
justify-content: flex-start;
196-
position: relative;
197-
198-
background-position: center right;
199-
}
200-
201-
.heroContent {
202-
width: 100%;
203-
order: 2;
204-
padding: 1rem;
205-
position: relative;
206-
z-index: 1;
207-
backdrop-filter: blur(1rem);
208-
background-color: color-mix(
209-
in srgb,
210-
var(--color-canvas-subtle) 70%,
211-
transparent
212-
);
213-
border-radius: 12px;
214-
margin: 0 0.5rem;
215-
}
216-
217-
.heroText {
218-
display: flex;
219-
flex-direction: column;
220-
text-align: center;
221-
align-items: center;
222-
}
223-
224-
.heroHeading {
225-
font-size: 2.5rem;
226-
line-height: 1;
227-
}
228-
229-
.heroActions {
230-
flex-direction: column;
231-
justify-content: center;
232-
align-items: center;
233-
}
234-
235-
.heroAction {
236-
min-width: 9rem;
237-
padding: 0.5rem 1rem;
238-
}
239-
240-
.heroDescription {
241-
font-size: 1rem;
242-
max-height: 14rem;
243-
text-overflow: ellipsis;
62+
padding-right: 22rem;
24463
}
24564
}

0 commit comments

Comments
 (0)