### File

`packages/components/eui-page/components/eui-page-top-content/eui-page-top-content.component.ts`

### Description

Top content area component for eui-page that provides a structured section above the main page content. Typically contains page-level alerts, notifications, or contextual information displayed prominently. Positioned between the page header and main content area with consistent spacing. Must be used as a direct child of eui-page to maintain proper layout structure.

### With alert message

Example :

    <eui-page>
      <eui-page-header label="Settings"></eui-page-header>
      <eui-page-top-content>
        <eui-alert type="info">Your changes have been saved successfully.</eui-alert>
      </eui-page-top-content>
      <eui-page-content>Main content</eui-page-content>
    </eui-page>

### Accessibility

- Use appropriate ARIA roles for alerts and notifications
- Ensure important messages are announced to screen readers
- Maintain sufficient color contrast for content

### Notes

- Must be direct child of eui-page component
- Positioned between header and main content
- Ideal for page-level notifications and contextual information

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
selector | `eui-page-top-content`

template

    <ng-content/>

### Index

###### Inputs

- e2eAttr

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-page-top-content'`
Data attribute used for end-to-end testing identification.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""