Skip to content
Components

Heading

Renders a semantic heading element with configurable level and size. size names a type role and accepts responsive values: size={{ base: "heading-sm", md: "heading-lg" }}.

The library of materials

Usage

import { Heading, HEADING_SIZES, HeadingSize, headingSizeClasses } from "@instruments/materia-ui/components/heading";

Best practices

  • Set level (h1–h6) for the document outline and size for visual scale independently - don't pick a tag just to get a size; a small-looking heading can still be an h2.

  • Keep one h1 per page and don't skip levels for styling; use size (responsive-capable) to make a lower-level heading look larger.

Props

PropTypeDefaultDescription
levelHeadingLevel | undefined"2"

Semantic heading tag rendered (h1–h6); independent of visual size.

sizeResponsiveValue<"title" | "heading" | "paragraph-sm" | "paragraph-lg" | "subheading" | "subheading-lg" | "heading-sm" | "heading-lg"> | undefined"subheading"

Type role - a single role or a responsive object like { base: "heading-sm", md: "heading-lg" }.

Also exports

  • constHEADING_SIZES
  • typeHeadingSize
  • constheadingSizeClasses

Composition

Used by

CookieBanner, Empty, MegaMenu, PageHeader, SectionHeader, SiteFooter