PageHeader
<ts-page-header> vv0.6.3
The ts-page-header component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-page-header></ts-page-header>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
backHref | back-href | string | undefined | — | Optional URL for the back navigation link. When set, renders a back arrow link. |
description | description | string | undefined | — | Optional description text displayed below the heading. |
heading | heading | string | — | The page heading text. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsBack | void | Yes | Yes | Emitted when the back link is clicked. |
| Name | Description |
|---|---|
actions | Right-aligned action buttons. |
breadcrumb | Breadcrumb navigation displayed above the heading. |
tabs | Tab navigation displayed below the description. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
back | The back navigation link. |
description | The description paragraph. |
heading | The h1 heading element. |
ts-page-header::part(back) { /* your custom styles */}<ts-page-header></ts-page-header>import { TsPageHeader } from '@tessera-ui/react';
<TsPageHeader></TsPageHeader>