Headline

Headline is best-suited for short, high-emphasis text, especially on smaller screens where Display would be too large. It renders an <h2>. This very docs layout uses it for each page's top-level title — see it above.

M3 Spec

open_in_new

Overview

Headline is one of five components — alongside Display, Title, Body, and Label — implementing the Material Design 3 type scale. They share the same prop shape (size, emphasized) and differ only in typescale role and element tag.

Reach for Headline for page and section titles that need more weight than Title but don't warrant a full Display.

Import

import { Headline } from '@noxlovette/material';

Live Demo

See it live, with Controls, in Storybook rather than a hand-rolled preview here.

widgets

Playground

Size and emphasized Controls.

Basic Usage

<script lang="ts">
  import { Headline } from '@noxlovette/material';
</script>

<Headline size="medium">Section title</Headline>

Headline Props

Prop	Type	Default	Description
`children` required	`Snippet`	`—`	The text content, rendered inside an <h2>.
`size`	`"small" \| "medium" \| "large"`	`"medium"`	Selects the M3 type-scale token, e.g. md-sys-typescale-headline-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.

Accessibility

title

Heading semantics

Renders as an <h2> — keep heading levels sequential (h1 → h2 → h3) rather than skipping levels for visual size alone.

contrast

Inherits color

Headline sets no color itself; pair with an on-surface color-role utility to guarantee contrast against its background.