Display is the largest text in the M3 type scale, reserved
for short, high-impact text or numerals — hero headlines, splash screens, big stats. It
renders an <h1>.
Display, Headline, Title, Body, and Label together implement the Material Design 3 type scale. All five share the same prop shape — size (small/medium/large) and emphasized — and differ only in which
typescale role and HTML element they render.
Use Display sparingly: it's meant for one hero moment per screen,
not body copy or every heading.
import { Display } from '@noxlovette/material'; See it live, with Controls, in Storybook rather than a hand-rolled preview here.
Playground
Size and emphasized Controls.
<script lang="ts">
import { Display } from '@noxlovette/material';
</script>
<Display size="large" emphasized>Welcome back</Display> | Prop | Type | Default | Description |
|---|---|---|---|
children required | Snippet | — | The text content, rendered inside an <h1>. |
size | "small" | "medium" | "large" | "medium" | Selects the M3 type-scale token, e.g. md-sys-typescale-display-large. |
emphasized | boolean | false | Bumps the font weight to medium for extra emphasis. |
class | string | — | Additional classes merged onto the root element, e.g. a color-role utility. |
Heading semantics
Renders as an <h1> — use at most once per page/screen so assistive tech gets one clear top-level heading.
Inherits color
Display sets no color itself; pair with an on-surface color-role utility to guarantee contrast against its background.