### File

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

### Description

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

Example :

    <eui-page>
      <eui-page-header label="Page Title"></eui-page-header>
      <eui-page-content>
        Main content here
      </eui-page-content>
    </eui-page>

### With columns

Example :

    <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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
selector | `eui-page`
styleUrls | `./styles/_index.scss`
templateUrl | `./eui-page.component.html`

### Index

###### Properties

- columns

###### HostBindings

- class

###### Accessors

- cssClasses

### HostBindings

class
Type : `string`

### Properties

columns
Type : `QueryList<EuiPageColumnsComponent>`
Decorators : `@ContentChild(EuiPageColumnsComponent, {static: true})`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""