i

Heading

Content · researched

A title that names a section of a page and shows its level in the structure.

atom

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Typography.Title native: yes antd 6.6.5
Variants
—
Sizes
—
States documented
disabled
Accessibility guidance
no

Renders h1 to h5 chosen by the level prop (1 to 5); no h6.

1 corrected on re-read
  • states_documented: null → ["disabled"] Typography.Title API row: disabled

Carbon

Heading (with Section) native: yes @carbon/react 1.117.0
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Renders h1-h6, level taken from nested Section context (Section defaults to a section element). Documented only in Storybook MDX in the repo, no page on the docs site.

GOV.UK

Headings (style: govuk-heading-*) native: yes govuk-frontend 6.5.1
Variants
Headings with captions
Sizes
xl, l, m, s
States documented
—
Accessibility guidance
no

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. Headings are documented only as type styles (Styles > Headings: govuk-heading-xl/l/m/s, govuk-caption-xl/l/m classes), not a component.

8 corrected on re-read
  • present: "absent" → "ships" Styles > Headings is a documented page; core/_typography.scss ships govuk-heading-* and govuk-caption-* classes; no macro
  • alias_kind: null → "same" Heading classes on native h1-h6 do the canonical job; shipped as a style, not a component
  • name_in_system: null → "Headings (style: govuk-heading-*)" Styles page "Headings"
  • builds_on_native: null → "yes" Page tells authors to use heading tags with these classes
  • variants: null → ["Headings with captions"] Page heading
  • sizes: null → ["xl","l","m","s"] Classes govuk-heading-xl/l/m/s on page; captions xl/l/m
  • a11y_documented: null → "no" No accessibility section; hierarchy advice only
  • urls: {"docs_url":null,"code_url":null} → {"docs_url":"https://design-system.service.gov.uk/styles/headings/","code_url":"https://github.com/alphagov/govuk-frontend/blob/main/packages/govuk-frontend/src/govuk/core/_typography.scss"} docs 200; blob 200

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. typography/ holds type-scale CSS and tokens (md-typescale-styles), not a heading element.

Primer

Heading native: yes @primer/react 38.40.1
Variants
large, medium, small
Sizes
—
States documented
—
Accessibility guidance
yes

Primer React. Renders h2 by default, polymorphic via as; status ready.

Spectrum

Heading native: yes @spectrum-web-components/button 1.12.4
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Implementations: S2 and v3 only. S2 Heading wraps React Aria Heading with a level prop (default element is a native h-element); it is a slot component for containers such as Dialog and Card. No spectrum.adobe.com page and no SWC element; v3 docs page not read. Not in installed SWC 1.12.4.

2 corrected on re-read
  • a11y_documented: "unread" → "no" v3 Heading page headings: Example, Content, Props; "Accessibility" appears only as a props group
  • urls: {"docs_url":"https://react-spectrum.adobe.com/react-spectrum/Heading.html","code_url":"https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/exports/Heading.ts"} → {"docs_url":"https://react-spectrum.adobe.com/v3/Heading.html","code_url":"https://github.com/adobe/react-spectrum/blob/main/packages/@react-spectrum/s2/exports/Heading.ts"} HTTP 200; changed: docs_url

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no heading component or package. The Typography component page and the uswds-elements/usa-type-setting styles style the h1-h6 elements and a usa-display class exists, but that is element styling, not a heading component.

Platform facts

Native elementh1-h6Spec: heading level given by the number in the name; h1 top-level section, h2 subsection. MDN: 'Do not skip heading levels'; prefer one h1 per page; do not use headings to resize text (use CSS font-size); screen reader users jump heading to heading. headingoffset/headingreset global attributes adjust computed level (MDN). Spec: header may wrap a heading, hgroup groups heading and subheading.
Baseline—
APG patternnone
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. heading content — Spec: h1-h6 'represent headings for their sections'.

The seven states

default Static text.
hover n/a — Not interactive.
focus n/a — Not focusable.
active n/a — Not interactive.
disabled n/a — Not defined by APG or HTML.
error n/a — Not defined by APG or HTML.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 11 of 35 fields changed on the second read — open any “corrected” note to see what it said before.