Typography · Display

Display

Hero / oversize typography primitive. Always uses the foundation's --style-hero-* tokens, which scale up at the md breakpoint. Default tag is {`

`} (use `as` when the hero look is needed outside heading semantics). The `tracking` prop is the deliberate letter-spacing knob — at hero sizes the value is a design decision. Single part. Eidos-native: no soma backing, no semantic events.

parts{compiled.parts.order.length} events0 responsivemd tracking3 scopeeidos

0 ? clamp : undefined} > {content}

trace {trace.length === 0 ? 'no semantic events' : `${trace.length} event(s)`} · style hero tag <{asTag}> · tracking {tracking || 'default'}

{#if tab === 'live'}

Controls

Display is eidos-native — no soma split. Always consumes --style-hero-*; per-axis overrides write inline --_display-* CSS variables.

eidos props · hero treatment

as rendered tag {#each tagOptions as opt} {/each} size override {#each sizes as opt} {/each} family override {#each families as opt} {/each} weight override {#each weights as opt} {/each} color override {#each colors as opt} {/each} align {#each alignOptions as opt} {/each} tracking letter-spacing {#each trackingOptions as opt} {/each} italic {italic ? 'on' : 'off'} underline {underline ? 'on' : 'off'} truncate {truncate ? 'on' : 'off'} clamp multi-line cap (0 = off) content

soma n/a · display is eidos-native — equivalent markup shown svelte

{somaSnippet}

eidos visual · hero style + per-axis overrides svelte

{eidosSnippet}

{/if} {#if tab === 'api'}

API reference

Display always uses the foundation's --style-hero-* tokens. Per-axis props override individual fields without breaking the hero cascade. tracking maps to fixed em values because foundation letter-spacing tokens are mostly 0 at hero scale.

Per-axis overrides

Prop	Type	Notes
size	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl'	Override the hero size step.
family	'primary' \| 'secondary' \| 'mono' \| 'display'	Override the hero family.
weight	'regular' \| 'medium' \| 'semibold' \| 'bold'	Override the hero weight.
color	'primary' \| 'secondary' \| 'muted' \| 'disabled' \| 'on-solid'	Content-role color slot.
align	'start' \| 'center' \| 'end' \| 'justify'	Maps to `text-align`.
tracking	'tight' \| 'normal' \| 'wide'	Letter-spacing: -0.02em / 0 / 0.02em.

Shorthand booleans + truncation

Prop	Type	Notes
italic	boolean	`font-style: italic`.
underline	boolean	`text-decoration: underline`.
truncate	boolean	Single-line ellipsis.
clamp	number	Multi-line cap via `-webkit-line-clamp`.

Element + escape hatch

Prop	Type	Notes
as	string	HTML tag. Default `'h1'`.
tagStyle	string	Extra inline CSS.

Reference comparison

Library	Closest equivalent	Difference
radix-themes	`<Heading size="9">`	Radix uses a large heading size; UIX has a dedicated Display surface.
chakra-ui	`<Heading as="h1">`	Chakra reuses Heading; UIX splits.
mantine	<Title order={`{1}`}>	Mantine's Title is the only heading primitive; UIX has Heading + Display.
mui Typography	`variant="h1"`	MUI's h1 ≈ UIX Display when consumer overrides `fontSize`.

{/if} {#if tab === 'morfo'}

Morfo contract

Field	Value
name	{displayMorfo.name}
kebab	`{displayMorfo.kebab}`
scope	{displayMorfo.scope.join(', ')}
parts	{partsList.length}
events	0

Parts

{#each partsList as part} {/each}

kebab	marker	element	archetype	optional
{part.kebab}	`[{part.marker}]`	<{part.defaultElement}>	{part.archetype}	{part.optional ? 'yes' : 'no'}

The Provider stamps data-display on the rendered tag (default {`

`}). The hero cascade is always-on; per-axis overrides come from `--_display-*` inline. `data-tracking` reflects the active tracking key for downstream styling.

{/if} {#if tab === 'sema'}

sema · events

Display declares no semantic events. As a passive primitive, it simply renders hero typography. Components that animate hero titles (landing-page entrance, dialog hero) compose Display inside an interactive surface that owns the relevant sema verb.

{/if} {#if tab === 'recipe'}

Eidos recipe

Recipe lives in src/uix/eidos/components/display/display.css. The selector [data-display] applies the hero cascade. Per-axis overrides come from inline --_display-* CSS variables; tracking maps to fixed em values via the same channel.

Selector	Owner	Purpose
`[data-display]`	morfo	Provider marker. Default hero-style applied.
{`[data-display][data-italic\|data-underline\|data-truncate\|data-clamp]`}	eidos	Visual modifier flags.

{/if} {#if tab === 'a11y'}

Accessibility

Concern	Contract
Role	Default tag {` `} — page-level heading. Use `as` when display typography is needed outside heading semantics (e.g. marketing pull-quote → `as="p"`).
Single h1 per page	Convention: only one {` `} per document. Display defaults to that; switch to `as` if a second hero appears.
Truncation + AT	CSS-only — full text remains in DOM. AT read the full hero.
Color contrast	Content-role colors meet WCAG AA. Free colors via `tagStyle` bypass that guarantee.

{/if}

Display

Controls

API reference

Morfo contract

`}). The hero cascade is always-on; per-axis overrides come from `--_display-*` inline. `data-tracking` reflects the active tracking key for downstream styling.

sema · events

Eidos recipe

Accessibility

`} — page-level heading. Use `as` when display typography is needed outside heading semantics (e.g. marketing pull-quote → `as="p"`).

`} per document. Display defaults to that; switch to `as` if a second hero appears.

Controls

API reference

Morfo contract

`}). The hero cascade is always-on; per-axis overrides come from --_display-* inline. data-tracking reflects the active tracking key for downstream styling.

sema · events

Eidos recipe

Accessibility

`} — page-level heading. Use as when display typography is needed outside heading semantics (e.g. marketing pull-quote → as="p").

`} per document. Display defaults to that; switch to as if a second hero appears.

`}). The hero cascade is always-on; per-axis overrides come from `--_display-*` inline. `data-tracking` reflects the active tracking key for downstream styling.

`} — page-level heading. Use `as` when display typography is needed outside heading semantics (e.g. marketing pull-quote → `as="p"`).

`} per document. Display defaults to that; switch to `as` if a second hero appears.