# Heading

Source: https://lumeo.nativ.sh/components/heading

# Heading

A semantic heading component that renders h1-h6 elements with sensible default sizes and weights.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Heading />

Preview Code

All Levels

# Heading Level 1

## Heading Level 2

### Heading Level 3

#### Heading Level 4

##### Heading Level 5

###### Heading Level 6

Preview Code

Custom Sizes

## h2 with small text

### h3 with 3xl text

#### h4 with lg text, normal weight

Preview Code

Tracking

# Default tight tracking (h1)

# Normal tracking

# Wide tracking

Preview Code

Level — interactive

Pick a heading level to see it applied live.

H@levelH@levelH@levelH@levelH@levelH@level

## This is a level 2 heading

## API Reference

### Heading

Property

Type

Default

Description

Level

int

2

Heading level (1–6). Determines the HTML element (h1–h6) and default size, weight, and tracking.

Size

string?

auto

Override the default text size. Maps to text-{value}. Defaults: h1=4xl, h2=3xl, h3=2xl, h4=xl, h5=lg, h6=base.

Weight

string?

auto

Override the default font weight. Defaults: h1/h2=bold, h3/h4=semibold, h5/h6=medium.

Tracking

string?

auto

Letter spacing override. Maps to tracking-{value}. Defaults to "tight" for h1/h2.