Page Header
<wa-page-header>
Frames application-level navigation, controls, and actions at the top of a page.
Use wa-page-header for application-level chrome. For a title and actions inside the page's main content, use wa-content-header instead.
Examples
Custom branding
Content in the start slot replaces the fallback Yoummday logo.
Header controls
The default slot stays visually centered while the logical start and end regions size independently.
Logo label and sizing
Use logo-label to adapt the fallback logo's accessible name. The logo and layout expose CSS custom properties for local sizing.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/page-header/page-header.js';
After installing Web Awesome via npm, import this component:
import '@yoummday/webawesome/dist/components/page-header/page-header.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/page-header/page-header.js';
To import this component for React 18 or below, use the following code:
import WaPageHeader from '@yoummday/webawesome/dist/react/page-header/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | Content centered in the header. |
end
|
Actions aligned to the inline end. |
start
|
Branding or navigation aligned to the inline start. Defaults to the Yoummday logo. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects |
|---|---|---|
logoLabellogo-label |
Accessible label for the fallback Yoummday logo. Set to an empty string when the logo is decorative.
Type
string
Default
'Yoummday'
|
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--gap |
The minimum gap between header regions.
Default
var(--wa-space-m)
|
--logo-size |
The default logo's block size.
Default
1.75rem
|
--padding-block |
The header's block padding.
Default
var(--wa-space-m)
|
--padding-inline |
The header's inline padding.
Default
0
|
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
center |
The centered default slot. |
::part(center)
|
end |
The inline-end slot. |
::part(end)
|
logo |
The default Yoummday logo. |
::part(logo)
|
page-header |
The component's header element. |
::part(page-header)
|
start |
The inline-start slot. |
::part(start)
|
base |
An alias for the component's header element. |
::part(base)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.