/// Typography

Display

Statement type — the fluid hero display at 96px with the tightest tracking.

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

View as Markdown

Basics

Display renders an h1 at the oversized statement scale. It fluidly tracks the viewport, so it stays commanding on a phone and enormous on a desktop.

Settlement, finalized.

Hero composition

The canonical hero stack: an Eyebrow kicker, the Display statement, then a Text lead. One Display anchors the whole view.

The Protocol

Move value across any chain.

One messaging layer, verified by a network you choose — not a bridge you have to trust.

When to use it

Display is the largest type in the system — reserve it for the single hero statement at the top of a landing or marketing view. It is the visual anchor of the page.

Use Heading for every other title; even a big section header should be Heading size="h1", not Display. Because Display fills the frame, more than one on a screen flattens the hierarchy and the impact is lost. Change as to a non-heading element (div, span) when the statement is decorative and shouldn't enter the document outline.

Guidelines

Use at most one `Display` per page — it is the hero anchor.
Pair it with an `Eyebrow` above and a `Text size="lg"` lead below.
Keep the statement short — a few words that carry weight balance best.
Set `as="div"` when the display text is decorative, not a page title.

Don't

Don't use `Display` for section headings — that is `Heading`.
Don't stack two `Display` elements in one viewport.
Don't pour a full sentence of body copy into it.
Don't override its `font-size`; it is intentionally fluid.

Accessibility

Defaults to `h1` — keep it as the page's single top-level heading, or switch `as` to `div`/`span` if another element already owns the `h1`.
`text-wrap: balance` keeps multi-line statements evenly ragged without manual line breaks.
The type is fluid but never drops below a legible floor at small viewports.

Mobile (React Native)

Preview. @protocore/pds-mobile ships the React Native sibling of Display. 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 { Display } from "@protocore/pds-mobile";

Parity with web. The statement / hero type.

Web is a 96px fluid hero; handsets are far narrower, so the mobile Display fluidly interpolates ~44–64dp on window width.
Semantics via accessibilityRole="header".

<Display>Ship it.</Display>

`Display` props

Prop	Type	Default	Description
`as`	`enum`	`h1`	The element to render. Defaults to `h1`.
`className`	`string`	—
`style`	`CSSProperties`	—