# EuiFooterComponent

**Type:** component



Standalone footer component for displaying supplementary content, links, and copyright information.
Provides a flexible container with primary and default styling variants for different visual contexts.
Unlike eui-app-footer which is part of the application shell, this component can be used independently in any layout.
Content is projected via ng-content allowing complete customization of footer structure and elements.

```html
<!-- Footer in app shell -->
<eui-app>
  <eui-app-footer>
    <eui-footer euiPrimary>
      © 2024 European Commission - <a href="/privacy">Privacy</a> - <a href="/legal">Legal Notice</a>
    </eui-footer>
  </eui-app-footer>
</eui-app>

<!-- Standalone footer in page -->
<eui-footer>
  <p>© 2024 My Organization</p>
  <nav>
    <a href="/about">About</a> |
    <a href="/contact">Contact</a>
  </nav>
</eui-footer>
```

### Accessibility
- Content projection allows flexible accessible structure
- Links within footer are keyboard accessible
- Use semantic HTML elements (nav, p) for proper structure
- Ensure sufficient color contrast in both themes

### Notes
- Can be used standalone or within eui-app-footer
- euiPrimary applies primary brand styling (default: false)
- Content is projected via ng-content for complete flexibility
- Common content includes copyright, legal links, version info, contact
- Can contain navigation links, text, or custom elements
- Styling adapts to primary or default theme variant
- Independent component, not tied to application shell layout


**Selector:** `eui-footer`

## Inputs
- **euiPrimary**: `boolean` - Applies primary theme styling to the footer. When true, uses primary brand colors and emphasis. When false, uses default neutral styling.