# EuiPageHeroHeaderComponent

**Type:** component



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
```html
<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


**Selector:** `eui-page-hero-header`

## Inputs
- **label**: `any` - Primary heading text displayed prominently in the hero header. Serves as the main page title or section heading.
- **subLabel**: `any` - Secondary descriptive text displayed below the main label. Provides additional context or explanation for the page content.