Heading

A section title rendered inside the native heading element matching its semantic depth.

Rendered as <h2>: the scope this island opens says how deep it sits.

Published this month

Rendered as <h3>: one level past the scope above.

A fine-print aside

Rendered as <h6>: an explicit level always wins.

View code

// The page knows the depth it is placing the island at, and hands it over:
// <RelatedArticles level={2} />

function RelatedArticles(handle: Handle<{ level: HeadingLevel }>) {
	return () => (
		<HeadingScope level={handle.props.level}>
			<Heading>Related articles</Heading>
			<Text>
				Rendered as &lt;h{handle.props.level}&gt;: the scope this island opens says how deep it sits.
			</Text>

			<HeadingScope>
				<Heading>Published this month</Heading>
				<Text>Rendered as &lt;h{handle.props.level + 1}&gt;: one level past the scope above.</Text>
			</HeadingScope>

			<Heading level={6}>A fine-print aside</Heading>
			<Text>Rendered as &lt;h6&gt;: an explicit level always wins.</Text>
		</HeadingScope>
	);
}

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Heading } from "@sdxc/ui";

Renders its children inside the native heading element matching level, styled at one fixed emphasis size — semibold, tight-tracked, and colored for emphasis, with line height collapsed for compact wrapping.

Examples

<Heading>Section title</Heading>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`level?`	`Level`	Semantic depth. Defaults to the nearest ancestor `HeadingScope`'s depth, or `1` where no scope wraps this heading at all.

Also accepts everything in TagProps<"h1">.