Heading pair

A title and the line under it.

Beta · Content blocks · packages/css/src/components/heading-pair.css

.pui-heading-pair (slide) · --web · --section · __eyebrow __title __subtitle. The slide subtitle reads accent/heading — grey on yellow and multicolor by the token.

Heading pair — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

Style slide (Title headline/large, 66 on slides, 65 web, Subtitle headline/medium at Medium on accent/heading, 46 on slides, the deck’s H2_46, 45 web, both tracked −1 % on a slide, the deck’s own styles: H1_66 tracking −0.66, H2_46 −0.46, a literal PERCENT here, because a bound FLOAT lands as pixels, this component sat at 0 while the token and the CSS carried −1 %, gap space/16) / web (Eyebrow body/large uppercase, 6% tracking, text/subtle; Title headline/large; Subtitle body/large text/muted)
Eyebrow, Title, Subtitle; Has eyebrow (web), Has subtitle
1200 wide for the specimen — 1792 on a slide, 1320 on the site; FILL it
Colour is the Accent mode: the slide subtitle follows it and goes grey on yellow by the token, never by hand
64 below the pair before content is the layout’s rule, not the component’s
Style section — a section of a web page: the Title at headline/small and, under it, a line at title/small Regular in accent/heading (the page’s accent; grey on yellow and multicolor), space/8 between them — the product pages’ section heads, the slide pair one step down. In code --section (request 43)

Use when a slide or a page section opens — one title, one line that frames it.

Do not use when it is a card’s title (Card); a one-sentence claim under a chart (Insight block); a dialog’s title (Dialog); a table’s caption.

Relates to Insight block, Card, Dialog, the Typography page.

Anti-patterns a subtitle in the accent’s main hue · a yellow subtitle · an eyebrow that is a sentence · two titles · SemiBold on the subtitle (600 is display; the subtitle is Medium).

Keywords: heading pair, title, subtitle, h1 h2, page head, eyebrow, hero heading

Figma — page Heading pair: Heading pair (3 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens heading-pair.css.

<header class="pui-heading-pair"><h1 class="pui-heading-pair__title">Who is Mobupps</h1>
  <p class="pui-heading-pair__subtitle">Powered by verified MAFO performance</p></header>
<header class="pui-heading-pair pui-heading-pair--web"><p class="pui-heading-pair__eyebrow">About us</p> …title, subtitle… </header>

The modifiers

	What it is	Note
Style	(none) slide · --web (a page’s head) · --section (a section of a web page: the title headline/small, the line under it title/small at Regular in accent/heading, space/8 between them — request 43)	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
`#858080` on `#ffffff`	3.89	3	text.subtle on surface.page (promised)	axe
`#6a66e4` on `#ffffff`	4.53	3	Icon-list glyph (promised)	ok
`#544d4d` on `#ffffff`	8.24	4.5	text.muted on surface.page (promised)	ok
`#0b0202` on `#ffffff`	20.51	4.5	text.default on surface.page (promised)	ok

4 distinct pair(s) rendered, 1 that axe calls a violation — each one carries its reason in storybook/test/axe-allowlist.json.

The focus ring

Nothing in this component takes focus.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).