Skip to main content
Digitaltableteur

Design system components

Display

Display-sized heading for marketing hero copy. Larger than the Title scale; used sparingly on landing/about/contact heroes where the type itself is the visual.

Status: beta. Group: display. Markdown version: /design-system/components/display.md

When to use

Display is the hero-scale text voice; one deliberate step above the Title ladder, for the handful of moments a page leads with type: heroes, campaign taglines, big numbers. The scale is fixed; as picks the semantics (h1 default; use p/span when the text is decorative rather than the document heading). If you are choosing between sizes, you want Title; Display has exactly one job.

When not to use

  • Do not use Display for in-page section headings; that is Title.
  • Do not stack two Display headings in the same viewport; the marketing visual collapses.
  • Do not use Display for section headings; that is the Title ladder (levels decoupled from sizes).

Look-alikes

  • Text: Do not stack Display lines to fake a type ladder; hierarchy below the hero belongs to Title and Text.
  • Title: Do not use Display for section headings; that is the Title ladder (levels decoupled from sizes).

Props

Display props
PropTypeDefaultDescriptionRequired
as"div" | "h1" | "h2" | "p" | "span"h1Element to render, defaults to h1.No
childrenReact.ReactNodenoneContent to display.Yes

Variants

  • Allowed as values: div, h1, h2, p, span (default h1).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

Display rules
LevelRuleHow it is checked
MUSTARIA: Renders an h1/h2/h3 by default; semantic heading. Override the level via as when nesting inside a section that already owns the page h1.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTA human completed an end-to-end accessibility review of this component.Manual review, last on 2026-05-28.
SHOULDReserve it for one display moment per page; the hero; a page of Displays has no hero.Not stated in the contract.
SHOULDMatch as to the document outline: h1 in the page hero, p or span for decorative taglines near an existing heading.Not stated in the contract.
SHOULDConstrain the measure (max-width); display type past ~15 words per line collapses its impact.Not stated in the contract.
SHOULDLet it wrap naturally; never force line breaks for shape at one viewport.Not stated in the contract.
SHOULD NOTDo not stack Display lines to fake a type ladder; hierarchy below the hero belongs to Title and Text.Not stated in the contract.

Install and import

  • Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
  • Import: import { Display } from "@digitaltableteur/react";
  • Entry point: @digitaltableteur/react/typography exports it too.
  • Styles: import @digitaltableteur/react/style.css once at the app boundary.
  • Also available as the custom element <dt-display>; see the custom elements manifest.

Links