Title is smaller than the headline styles and best-suited
for shorter, medium-emphasis text — section headers, card titles, list-item leads. It
renders an <h3>. This docs layout uses it for every section
heading you see on this page.
Title is one of five components — alongside Display, Headline, 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.
Its emphasized variant maps to font-semibold, one step heavier than Display/Headline/Body's font-medium, matching the M3 spec's per-role emphasized
weight.
import { Title } 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 { Title } from '@noxlovette/material';
</script>
<Title size="medium">Card title</Title> | Prop | Type | Default | Description |
|---|---|---|---|
children required | Snippet | — | The text content, rendered inside an <h3>. |
size | "small" | "medium" | "large" | "medium" | Selects the M3 type-scale token, e.g. md-sys-typescale-title-large. |
emphasized | boolean | false | Bumps the font weight to semibold for extra emphasis. |
class | string | — | Additional classes merged onto the root element, e.g. a color-role utility. |
Heading semantics
Renders as an <h3> — keep heading levels sequential (h1 → h2 → h3) rather than skipping levels for visual size alone.
Inherits color
Title sets no color itself; pair with an on-surface color-role utility to guarantee contrast against its background.