# EuiPageTopContentComponent

**Type:** component



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


**Selector:** `eui-page-top-content`

## Inputs
- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification.