/// Typography

Heading

Section heading — sharp, medium-weight, with a tokenised type ramp and matched tracking.

import { Heading } from "@protocore/pds";

View as Markdown

Basics

Heading renders an h2 at the h2 scale by default — the workhorse section title.

Consensus & finality

How the protocol agrees on a single canonical history.

Type ramp

Four steps: title (24), h3 (28), h2 (36), h1 (56). Tracking tightens as size grows so large headings stay optically even.

Ledger 56

Block production 36

Mempool policy 28

Gas accounting 24

Semantics vs. scale

as sets the DOM level (document outline) and size sets the visual scale — decoupled, so you can keep a correct heading hierarchy without compromising rhythm.

Networking

Peer discovery

A subsection that stays an h3 in the document outline.

When to use it

Use Heading for every section and subsection title inside a page's content. It is the bridge between the oversized Display statement type and ordinary Text body copy.

Reach for Display instead when you need a single hero statement at the top of a landing view — it is heavier and fluid, and there should be at most one per screen. For the small uppercase kicker that sits *above* a heading, use Eyebrow. Always keep the as level sequential (an h2 section, then h3 subsections) even when you override size for visual weight.

Guidelines

Keep `as` levels sequential for a valid document outline.
Override `size` (not the element) when you want a different visual weight.
Pair a `Heading` with an `Eyebrow` above and `Text` lead below for section intros.
Use `title` size for card and panel headers.

Don't

Don't skip heading levels (`h2` straight to `h4`) to get a size.
Don't use `Heading` for the page's hero statement — that is `Display`.
Don't put more than one `h1` in a page.
Don't restyle a `Heading` with a custom `font-size`; pick the nearest ramp step.

Accessibility

Renders a real `h1`–`h6` element, so screen-reader heading navigation and the document outline work as expected.
`as` (semantic level) is independent of `size` (visual scale) — set the level for meaning, the scale for rhythm.
Ensure exactly one `h1` per page and no skipped levels in the sequence.

Mobile (React Native)

Preview. @protocore/pds-mobile ships the React Native sibling of Heading. It mirrors the web API where React Native allows; the package is a preview with no device-level QA yet, so pin it and expect small changes.

Import it from the mobile package (not @protocore/pds), inside a <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:

import { Heading } from "@protocore/pds-mobile";

Parity with web. Same size ramp (title / h3 / h2 / h1) as web.

The web as (h1–h6) prop has no RN analog; heading semantics come from accessibilityRole="header".

<Heading size="h2">Deployments</Heading>

`Heading` props

Prop	Type	Default	Description
`as`	`enum`	`h2`	Heading level element. Defaults to `h2`.
`className`	`string`	—
`size`	`enum`	`h2`	Type ramp: `title` 24 · `h3` 28 · `h2` 36 · `h1` 56. Default `h2`.
`style`	`CSSProperties`	—