### File

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

### Description

Footer component for eui-page that provides a structured bottom section for page-level content. Supports highlighted visual states through the BaseStatesDirective for emphasis. Typically contains copyright information, links, actions, or supplementary page content. Positioned at the bottom of the page layout with consistent spacing and styling. Must be used as a direct child of eui-page to maintain proper layout structure.

### Basic footer

Example :

    <eui-page>
      <eui-page-content>Main content</eui-page-content>
      <eui-page-footer>
        <p>© 2024 European Commission</p>
      </eui-page-footer>
    </eui-page>

### Highlighted footer

Example :

    <eui-page-footer [euiHighlighted]="true">
      <button euiButton euiPrimary>Save Changes</button>
      <button euiButton euiSecondary>Cancel</button>
    </eui-page-footer>

### Accessibility

- Use semantic footer element for proper document structure
- Ensure links and buttons have descriptive labels
- Maintain sufficient color contrast for footer content

### Notes

- Must be direct child of eui-page component
- Supports euiHighlighted directive for visual emphasis
- Provides consistent spacing at bottom of page layout

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiHighlighted
selector | `eui-page-footer`

template

    <ng-content/>

### Index

###### Inputs

- e2eAttr

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-page-footer'`
Data attribute used for end-to-end testing identification.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""