Heading

A heading element for page titles and section headers with configurable size, weight, and semantic level.

Anatomy

<script>
  import { Heading } from "@saas-ui/svelte/typography/heading";
</script>

<!-- Basic heading -->
<Heading>Page Title</Heading>

<!-- With size -->
<Heading size="3xl">Large Heading</Heading>

<!-- As different element -->
<Heading as="h1" size="4xl">Main Title</Heading>

Examples

As Element Accessibility

Use the as prop to render as different heading levels (h1-h6) for proper semantic structure.

<Stack>
	<Heading as="h1">Level 1</Heading>
	<Heading as="h2">Level 2</Heading>
	<Heading as="h3">Level 3</Heading>
</Stack>

Basic Accessibility

Basic heading with default styling for page titles and section headers.

<Heading>The quick brown fox jumps over the lazy dog</Heading>

Composition Accessibility

Compose headings with other components for rich layouts and visual hierarchy.

<Stack align="start">
	<Heading size="2xl">Modern payments for Stores</Heading>
	<Text class="text-fg-muted mb-3">
		PayMe helps startups get paid by anyone, anywhere in the world
	</Text>
	<Button>
		Create account
		<Icon as={ArrowRight} size="sm" />
	</Button>
</Stack>

Highlight Accessibility

Combine with the Mark component to highlight important text within headings.

<Stack>
	<Heading size="3xl">
		Build modern SaaS applications with <Mark
			colour="indigo"
			variant="text">Saas UI</Mark>
	</Heading>
	<Text class="text-fg-muted">
		Saas UI provides enterprise-ready components and patterns to help
		you build professional applications faster than ever.
	</Text>
</Stack>

Multiline Accessibility

Headings work well with multiline text content for longer titles.

<Stack>
	{#each textSizes as size}
		<Heading {size}>
			The quick brown fox
			<br />
			jumps over the lazy dog
		</Heading>
	{/each}
</Stack>

Sizes Accessibility

Use the size prop to change the size of the heading. Available sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl.

<Stack>
	{#each textSizes as size}
		<Heading {size}>The quick brown fox jumps over the lazy dog</Heading>
	{/each}
</Stack>

Weights Accessibility

Use the weight prop to change the font weight. Available weights: normal, medium, semibold, bold.

<Stack>
	{#each headingWeights as w}
		<Heading weight={w}>{w}</Heading>
	{/each}
</Stack>

Props

Prop	Type	Default	Description
`as`	`text`	`h2`	-
`size`	`xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \| 4xl \| 5xl \| 6xl \| 7xl`	`md`	The size of the component.
`weight`	`normal \| medium \| semibold \| bold`	`semibold`	-
`fontWeight`	`any`	-	-
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.