Laravel Heading Component
Free · MITSemantic heading component with automatic sizing based on heading level.
A Heading built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::heading>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::heading :level="1">Page Title</x-aura::heading>See the full API, props and live examples in the Heading documentation.
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
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-2xlh2->text-xlh3->text-lgh4->text-baseh5->text-smh6->text-xs
See more examples and every variant in the Heading documentation.