# EuiPageTopContentComponent

**Type:** component

<p>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.</p>
<h3>With alert message</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page&gt;
  &lt;eui-page-header label=&quot;Settings&quot;&gt;&lt;/eui-page-header&gt;
  &lt;eui-page-top-content&gt;
    &lt;eui-alert type=&quot;info&quot;&gt;Your changes have been saved successfully.&lt;/eui-alert&gt;
  &lt;/eui-page-top-content&gt;
  &lt;eui-page-content&gt;Main content&lt;/eui-page-content&gt;
&lt;/eui-page&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use appropriate ARIA roles for alerts and notifications</li>
<li>Ensure important messages are announced to screen readers</li>
<li>Maintain sufficient color contrast for content</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of eui-page component</li>
<li>Positioned between header and main content</li>
<li>Ideal for page-level notifications and contextual information</li>
</ul>


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

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - <p>Data attribute used for end-to-end testing identification.</p>

