Page Header
Content area header with title, description, actions, and optional breadcrumb.
Default
Users
Manage user accounts and permissions.
Base
| Class | Description |
|---|---|
.ui-page-header | Base class |
Bordered
| Class | Description |
|---|---|
.ui-page-header--bordered | bordered |
Sticky
| Class | Description |
|---|---|
.ui-page-header--sticky | sticky |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-page-header-padding-block |
var(--ui-space-3) |
Vertical padding |
--ui-page-header-padding-inline |
0 |
Horizontal padding |
--ui-page-header-gap |
var(--ui-space-2) |
Gap between children |
--ui-page-header-border-color |
var(--ui-color-border) |
Border color |
With Breadcrumb
Users
<!-- Breadcrumb spans the full width above the title row. -->
<header class="ui-page-header ui-page-header--bordered">
<nav class="ui-page-header__breadcrumb">
<span>Home / Settings / Users</span>
</nav>
<div class="ui-page-header__title">
<h1 class="ui-heading ui-heading--xl">Users</h1>
</div>
<div class="ui-page-header__actions">
<button class="ui-button">Export</button>
</div>
</header>Bordered
Dashboard
<!-- Bottom border via inset box-shadow. -->
<header class="ui-page-header ui-page-header--bordered">
<div class="ui-page-header__title">
<h1 class="ui-heading ui-heading--xl">Dashboard</h1>
</div>
</header>Sticky
Sticky Header
<!-- Sticks to the top of the scroll container. -->
<header class="ui-page-header ui-page-header--sticky ui-page-header--bordered">
<div class="ui-page-header__title">
<h1 class="ui-heading ui-heading--xl">Sticky Header</h1>
</div>
<div class="ui-page-header__actions">
<button class="ui-button">Save</button>
</div>
</header>