Aura Wire

Livewire UI Kit

Typography

Component

Heading

Semantic section headers supporting levels H1 through H6, explicit size scales, color variants, and custom font weights.

Component Syntax

blade 
<x-aura::heading level="1" size="xl">
    Heading Title
</x-aura::heading>

1. Semantic Heading Levels (H1 to H6)

blade

Level 1 (H1) Heading

Level 2 (H2) Heading

Level 3 (H3) Heading

Level 4 (H4) Heading

Level 5 (H5) Heading
Level 6 (H6) Heading

2. Explicit Size Scales

blade

2XL Heading Scale

XL Heading Scale

LG Heading Scale

MD Heading Scale

SM Heading Scale

XS Heading Scale

2XS Uppercase Monospace Scale

3. Tone and Gradient Variants

blade

Default Heading

Monochrome Gradient Headline

Subtle Muted Heading

Accent High Contrast Heading

4. Real World Card Header Pattern

blade

Project Settings and Security

Manage API tokens, environment keys, and deployment webhooks.

Component Props

Available properties and configurations for the heading component.

Prop Default Available Values

level

1
1 2 3 4 5 6

size

null
2xs xs sm md lg xl 2xl

as

null
h1 h2 h3 h4 h5 h6 p span

variant

default
default gradient subtle muted accent positive warning danger

weight

null
light normal medium semibold bold extrabold black

align

null
left center right justify

balance

true
true false

tracking

null
tighter tight normal wide wider widest

truncate

false
true false

nowrap

false
true false