# EuiPageComponent

**Type:** component

<p>Root page layout component that provides the foundational structure for application pages.
Automatically detects and adapts styling based on the presence of column-based layouts.
Serves as the top-level container for page content, headers, sidebars, and footers.
Provides consistent spacing, alignment, and responsive behavior across the application.
Typically used as the outermost wrapper for each route&#39;s content in the application.</p>
<h3>Basic page layout</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page&gt;
  &lt;eui-page-header label=&quot;Page Title&quot;&gt;&lt;/eui-page-header&gt;
  &lt;eui-page-content&gt;
    Main content here
  &lt;/eui-page-content&gt;
&lt;/eui-page&gt;</code></pre></div><h3>With columns</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page&gt;
  &lt;eui-page-columns&gt;
    &lt;eui-page-column label=&quot;Sidebar&quot;&gt;Sidebar content&lt;/eui-page-column&gt;
    &lt;eui-page-column label=&quot;Main&quot;&gt;Main content&lt;/eui-page-column&gt;
  &lt;/eui-page-columns&gt;
&lt;/eui-page&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic HTML within page sections for proper document structure</li>
<li>Ensure proper heading hierarchy (h1, h2, h3) within page content</li>
<li>Landmark regions help screen reader users navigate page sections</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically applies column-specific styling when eui-page-columns is present</li>
<li>Provides consistent spacing and layout across all application pages</li>
<li>Works with both v1 and v2 page component variants</li>
</ul>


**Selector:** `eui-page`

**Standalone:** false
