Heading

Heading renders semantic h1-h6 elements with independent visual sizing. The level maps to a default size but can be overridden.

Basic Usage

import { Heading } from "@paramanu/typography-react"

export default function App() {
return <Heading level={2}>Section Title</Heading>
}

<h2 class="pm-heading pm-heading--size-2xl pm-heading--weight-bold">Section Title</h2>

Heading renders the correct semantic <h1>-<h6> element based on level. Maintain a logical heading hierarchy in your page.

Prop	Type	Default	Description
`level`	`1-6`	`2`	Semantic heading level
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl"`	auto	Visual size
`weight`	`"normal" \| "medium" \| "semibold" \| "bold"`	`"bold"`	Font weight
`align`	`"left" \| "center" \| "right"`	—	Text alignment
`lineHeight`	`"tight" \| "normal" \| "relaxed"`	—	Line height
`truncate`	`boolean`	`false`	Truncation
`color`	`"default" \| "muted" \| "dimmed" \| "primary" \| ...`	—	Semantic color