Heading
A heading with a semantic level and a token type style.
<mm-heading level="1">orders_daily</mm-heading>
<mm-heading level="2" variant="panel-title">Needs attention</mm-heading>
Guidance
A heading with the right level for the document outline and the right type style for its role.
level (1 to 6) sets the semantics; variant sets the look, so a panel title can be an h3 without
looking like one. Without a variant, level 1 is display-title, 2 is heading, 3 is heading-sm and
4 to 6 are panel-title.
The display styles (Geist at 600) are only for the page title (display-title, 34px, or
display-section, 26px, in a compact page header) and marketing heroes (display-hero, 56px), never
below 24px. Section, panel and empty-state headings use heading, heading-sm or panel-title. If a display
heading is styled smaller than 24px, it falls back to heading and warns in the console. One display
title per view region. Display numbers use tabular figures. Headings are sentence case.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
level | level | number | 2 | Outline level, 1 to 6. |
variant | variant | HeadingVariant | undefined | Type style. Defaults from level when not set. |
Slots
| Slot | Description |
|---|---|
| Default | The heading text. |
CSS parts
| Part | Description |
|---|---|
heading | The native h1 to h6. |
Examples
Every state of mm-heading in Storybook, with keyboard and screen reader tests.