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

<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

<ng-content/>