Heading

The Heading component renders semantic heading elements (h1-h6) with consistent styling.

Preview

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Import

import { Heading } from 'meridian';

Props

Prop	Type	Default	Description
level	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic heading level (1-6)

Usage

Basic

<Heading>Default heading (h2)</Heading>

Heading Levels

Use the level prop to specify the semantic heading level:

<Heading level={1}>Page Title</Heading>
<Heading level={2}>Section Title</Heading>
<Heading level={3}>Subsection</Heading>
<Heading level={4}>Group Title</Heading>
<Heading level={5}>Small Heading</Heading>
<Heading level={6}>Label Heading</Heading>

Typography Scale

Each heading level has a corresponding font size from the design system:

Level	Font Size	Use Case
1	32px (2rem)	Page titles
2	24px (1.5rem)	Section titles
3	18px (1.125rem)	Subsections
4	16px (1rem)	Group titles
5	14px (0.875rem)	Small headings
6	12px (0.75rem)	Labels, uppercase

Document Structure

Use headings to create a logical document structure:

<Heading level={1}>Dashboard</Heading>

<Heading level={2}>Overview</Heading>
<p>Summary statistics and key metrics.</p>

<Heading level={2}>Recent Activity</Heading>
<Heading level={3}>Today</Heading>
<p>Activities from today.</p>

<Heading level={3}>This Week</Heading>
<p>Activities from this week.</p>