### File

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

### Description

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.

Example :

    <!-- 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

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-footer`
template |
    <ng-content />
styleUrl | `./footer.component.scss`

### Index

###### Inputs
euiPrimary
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

euiPrimary
Type : `boolean`
Default value : `false`
Applies primary theme styling to the footer. When true, uses primary brand colors and emphasis. When false, uses default neutral styling.

### HostBindings

class
Type : `string`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""