# EuiFooterComponent

**Type:** component

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Footer in app shell --&gt;
&lt;eui-app&gt;
  &lt;eui-app-footer&gt;
    &lt;eui-footer euiPrimary&gt;
      © 2024 European Commission - &lt;a href=&quot;/privacy&quot;&gt;Privacy&lt;/a&gt; - &lt;a href=&quot;/legal&quot;&gt;Legal Notice&lt;/a&gt;
    &lt;/eui-footer&gt;
  &lt;/eui-app-footer&gt;
&lt;/eui-app&gt;

&lt;!-- Standalone footer in page --&gt;
&lt;eui-footer&gt;
  &lt;p&gt;© 2024 My Organization&lt;/p&gt;
  &lt;nav&gt;
    &lt;a href=&quot;/about&quot;&gt;About&lt;/a&gt; |
    &lt;a href=&quot;/contact&quot;&gt;Contact&lt;/a&gt;
  &lt;/nav&gt;
&lt;/eui-footer&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Content projection allows flexible accessible structure</li>
<li>Links within footer are keyboard accessible</li>
<li>Use semantic HTML elements (nav, p) for proper structure</li>
<li>Ensure sufficient color contrast in both themes</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Can be used standalone or within eui-app-footer</li>
<li>euiPrimary applies primary brand styling (default: false)</li>
<li>Content is projected via ng-content for complete flexibility</li>
<li>Common content includes copyright, legal links, version info, contact</li>
<li>Can contain navigation links, text, or custom elements</li>
<li>Styling adapts to primary or default theme variant</li>
<li>Independent component, not tied to application shell layout</li>
</ul>


**Selector:** `eui-footer`

**Standalone:** false

## Inputs

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

