<!-- Protocore Design System — Display -->
# Display

- **Category:** Typography (`typography`)
- **Slug:** `typography/display`
- **Status:** stable
- **Platforms:** web, mobile
- **Import:** `import { Display } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/typography/display

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

## 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.

## 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:

```tsx
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"`.

```tsx
<Display>Ship it.</Display>
```

## Props

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

## Examples

### 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.

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

export default function DisplayBasics() {
  return <Display>Settlement, finalized.</Display>;
}
```

### Hero composition

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

```tsx
import { Eyebrow, Display, Text } from "@protocore/pds";

export default function DisplayHero() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
      <Eyebrow>The Protocol</Eyebrow>
      <Display>Move value across any chain.</Display>
      <Text size="lg" color="secondary" style={{ maxWidth: 440 }}>
        One messaging layer, verified by a network you choose — not a bridge you have to trust.
      </Text>
    </div>
  );
}
```

## Guidelines

**Do**

- 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

**Notes**

- 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.

## Related

`heading`, `eyebrow`, `text`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/