Lumeo

Heading

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

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Heading />

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

h2 with small text

h3 with 3xl text

h4 with lg text, normal weight

Default tight tracking (h1)

Normal tracking

Wide tracking

Render the heading's visual styling on a non-h* element when it shouldn't be part of the document outline.

Looks like an h1, rendered as a span

Heading styles on a paragraph

Pick a heading level to see it applied live.

This is a level 2 heading

API Reference

Heading

Size, Weight and Tracking auto-resolve from Level when left unset: sizes are h1=4xl, h2=3xl, h3=2xl, h4=xl, h5=lg, h6=base; weights are h1/h2=bold, h3/h4=semibold, h5/h6=medium; tracking defaults to "tight" for h1/h2 and unset otherwise.