eui documentation
  1. Components
  2. EuiPageHeroHeaderComponent

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
HostBindings
Accessors

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
getcssClasses()

results matching ""

    No results matching ""