### File

`packages/components/eui-page/components/eui-page-hero-header/eui-page-hero-header.component.ts`

### Description

Hero header component for eui-page that displays a prominent page title with optional subtitle. Provides a visually distinct header section with larger typography and enhanced spacing. Typically used for landing pages, dashboards, or major section introductions. Creates visual hierarchy and establishes page context for users. Must be used as a direct child of eui-page to maintain proper layout structure.

### Basic hero header

Example :

    <eui-page>
      <eui-page-hero-header
        label="Welcome to the Portal"
        subLabel="Your central hub for managing applications">
      </eui-page-hero-header>
      <eui-page-content>Content here</eui-page-content>
    </eui-page>

### Accessibility

- Uses semantic heading structure for proper document outline
- Ensure label text is descriptive and meaningful
- Maintain sufficient color contrast for readability

### Notes

- Must be direct child of eui-page component
- Provides larger, more prominent styling than standard page header
- Best suited for landing pages or major section introductions
- Use sparingly to maintain visual hierarchy

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
selector | `eui-page-hero-header`
templateUrl | `./eui-page-hero-header.component.html`

### Index

###### Inputs
label subLabel
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

label
Type : `any`
Primary heading text displayed prominently in the hero header. Serves as the main page title or section heading.

subLabel
Type : `any`
Secondary descriptive text displayed below the main label. Provides additional context or explanation for the page content.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""