Skip to content

Overview

The <x-aura::heading> component renders a semantic HTML heading tag (h1 through h6) with consistent typography styling. The font size is automatically derived from the heading level, but can be overridden with the size prop for visual flexibility while maintaining correct document outline semantics.

Use headings for:

  • Page titles and section headers
  • Card and modal titles
  • Sidebar group labels
  • Any content requiring semantic hierarchy

Basic Usage

Section Title

<x-aura::heading :level="1">Page Title</x-aura::heading>

Props

Prop Type Default Description
level int 2 Heading level (1-6). Determines the HTML tag (h1-h6) and default font size
size string|null null Override font size: xs, sm, base, lg, xl, 2xl. When null, size is derived from level

Default sizes per level (when size is null):

  • h1 -> text-2xl
  • h2 -> text-xl
  • h3 -> text-lg
  • h4 -> text-base
  • h5 -> text-sm
  • h6 -> text-xs

Variants / Examples

Different Levels

Main Title

Section Title

Subsection

Group Label

<x-aura::heading :level="1">Main Title</x-aura::heading>
<x-aura::heading :level="2">Section Title</x-aura::heading>
<x-aura::heading :level="3">Subsection</x-aura::heading>
<x-aura::heading :level="4">Group Label</x-aura::heading>

Custom Size Override

Visually Large, Semantically h3

{{-- Renders as h3 tag but with h1 visual size --}}
<x-aura::heading :level="3" size="2xl">Visually Large, Semantically h3</x-aura::heading>

In a Card Context

Card Title

Supporting description text.

<x-aura::card>
    <x-aura::heading :level="3" size="lg">Card Title</x-aura::heading>
    <x-aura::text color="muted" class="mt-1">Supporting description text.</x-aura::text>
</x-aura::card>

Accessibility

  • The component renders the correct semantic heading tag (h1-h6), which is critical for screen reader navigation and document outline.
  • Heading levels should follow a logical hierarchy (avoid skipping levels, e.g., h1 to h3).
  • The size prop allows visual adjustments without breaking the semantic structure.
  • All headings include tracking-tight and font-semibold for consistent readability.