Heading
A semantic heading that decouples the heading level from its visual size, weight, and tone.
Loading preview…
1<script lang="ts">
2 import Heading from './heading.svelte';
3</script>
4
5<div class="flex flex-col gap-3">
6 <Heading level={2} size="xl">The quick brown fox</Heading>
7 <Heading level={3} size="md" tone="muted">Jumps over the lazy dog</Heading>
8</div>
9Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/heading/heading.svelte
- ~/components/heading/heading.types.ts
- ~/components/heading/heading.variants.ts
Usage
Pick level for document semantics and size for the visual scale, so a page can keep a single h1 without being locked into the largest type size.
1<script lang="ts">
2 import Heading from '~/components/heading/heading.svelte';
3</script>
4
5<Heading level={1} size="2xl">Design system</Heading>
6<Heading level={2} size="md" tone="muted">Components</Heading>