Page header
A page-level title block with slots for breadcrumb, eyebrow, title, lead text, metadata, and actions. The --hero modifier uses display sizes; --compact produces a minimal dashboard header.
Standard page header
index.htmlhtml
<div class="ln-page-header ln-page-header--bordered">
<span class="ln-page-header__eyebrow">Documentation</span>
<h1 class="ln-page-header__title">Getting Started</h1>
<p class="ln-page-header__lead">Install ln via npm, import the compiled
CSS, and add the JS bundle to your page.</p>
</div>Documentation
Getting Started
Install ln via npm, import the compiled CSS, and add the JS bundle to your page.
Compact variant
index.htmlhtml
<div class="ln-page-header ln-page-header--compact">
<h1 class="ln-page-header__title">Dashboard</h1>
</div>Dashboard
Reference
| Class | Description | Responsive |
|---|---|---|
.ln-page-header | Page header container with bottom margin | No |
.ln-page-header__breadcrumb | Breadcrumb slot above the title | No |
.ln-page-header__eyebrow | Uppercase label above the title | No |
.ln-page-header__title | Page heading (h1 scale) | No |
.ln-page-header__lead | Subtitle or lead paragraph | No |
.ln-page-header__meta | Metadata row below the title | No |
.ln-page-header__actions | Action button row | No |
.ln-page-header__tabs | Tab bar below the header | No |
.ln-page-header--hero | Larger display title with extra bottom margin | No |
.ln-page-header--compact | Smaller title with reduced margin | No |
.ln-page-header--center | Centre-aligned content | No |
.ln-page-header--bordered | Bottom border separator | No |