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

<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

<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

<ng-content/>