Heading

stable

Semantic heading element with display and size variants

import { Heading } from "@nodus/design-system"

Heading 1

Loading demo…

Prop	Type	Default	Description
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	2	Heading level (renders h1–h6)
`color`	`string`	—	Text color override
`trim`	`boolean`	—	Set line-height to 1 for tight layout

level

Type 1 | 2 | 3 | 4 | 5 | 6Default 2

Heading level (renders h1–h6)

color

Type stringDefault —

Text color override

trim

Type booleanDefault —

Set line-height to 1 for tight layout

Metadata123456type

MobileWorks As-Is

Headings reflow naturally. Use fluid type scale (clamp) for display-size headings to prevent overflow on narrow screens.

Design Rationale

This component was designed to express:

Body text primitive with size and weight control

Was this helpful?