# EuiPageComponent

**Type:** component



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's content in the application.

### Basic page layout
```html
<eui-page>
  <eui-page-header label="Page Title"></eui-page-header>
  <eui-page-content>
    Main content here
  </eui-page-content>
</eui-page>
```

### With columns
```html
<eui-page>
  <eui-page-columns>
    <eui-page-column label="Sidebar">Sidebar content</eui-page-column>
    <eui-page-column label="Main">Main content</eui-page-column>
  </eui-page-columns>
</eui-page>
```

### Accessibility
- Use semantic HTML within page sections for proper document structure
- Ensure proper heading hierarchy (h1, h2, h3) within page content
- Landmark regions help screen reader users navigate page sections

### Notes
- Automatically applies column-specific styling when eui-page-columns is present
- Provides consistent spacing and layout across all application pages
- Works with both v1 and v2 page component variants


**Selector:** `eui-page`