### File

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

### Description

Main content area component for eui-page that provides the primary container for page body content. Serves as the central content region between page header and footer with appropriate spacing and layout. Applies consistent styling and responsive behavior for the main content area. Typically contains the primary information, forms, tables, or other interactive elements of the page. Must be used as a direct child of eui-page to maintain proper layout structure.

### Basic usage

Example :

    <eui-page>
      <eui-page-header label="Dashboard"></eui-page-header>
      <eui-page-content>
        <p>Main page content goes here</p>
        <eui-table [data]="tableData"></eui-table>
      </eui-page-content>
    </eui-page>

### Accessibility

- Acts as the main content landmark for screen readers
- Should contain the primary page content and interactive elements
- Use proper heading hierarchy within content area

### Notes

- Must be direct child of eui-page component
- Provides consistent spacing between header and footer
- Automatically adapts to responsive layouts

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
selector | `eui-page-content`

template

    <ng-content/>

### Index

###### Properties

- class

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-page-content'`

### Properties

class
Type : `string`
Default value : `'eui-page-content'`
Decorators : `@HostBinding()`

# results matching ""

# No results matching ""