A page-level title area with optional description and supplementary content. Page header displays the main heading for...

A page-level title area with optional description and supplementary content. Page header displays the main heading for a page along with optional descriptive text and supplementary elements (like badges or status indicators). Use it at the top of page content to establish context and set user expectations for the page purpose. Use page header when: - Introducing a new page with a clear title - Adding descriptive content below a page title - Displaying badges, tags, or status indicators next to the title - Creating consistent heading treatment across pages Composition: - Set the `heading` property for the main page title - Use the default slot for description text - Use the `titleAfter` slot for badges, tags, or other title-adjacent content

<ed-page-header></ed-page-header>

Properties

Name Type Default Description
heading String string = 'Page header title' A page-level title area with optional description and supplementary content. Page header displays the main heading for a page along with optional descriptive text and supplementary elements (like badges or status indicators). Use it at the top of page content to establish context and set user expectations for the page purpose. Use page header when: - Introducing a new page with a clear title - Adding descriptive content below a page title - Displaying badges, tags, or status indicators next to the title - Creating consistent heading treatment across pages Composition: - Set the `heading` property for the main page title - Use the default slot for description text - Use the `titleAfter` slot for badges, tags, or other title-adjacent content / export class EdPageHeader extends EdElement { static get styles() { return unsafeCSS(styles); } /** Page header title

Slots

Name Description
- Description text appearing below the page title
titleAfter Optional content (badges, tags) appearing inline with or after the heading

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/page-header/page-header.ts