# EuiContentCardFooterComponent

**Type:** component

<p>Container for footer content at the bottom of the card. Typically used for actions, links, or supplementary information.</p>
<h3>Action Buttons</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-footer&gt;
    &lt;eui-button&gt;View Details&lt;/eui-button&gt;
    &lt;eui-button euiSecondary&gt;Cancel&lt;/eui-button&gt;
&lt;/eui-content-card-footer&gt;</code></pre></div><h3>Links</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-footer&gt;
    &lt;a href=&quot;/details&quot; class=&quot;eui-u-text-link&quot;&gt;Read more&lt;/a&gt;
&lt;/eui-content-card-footer&gt;</code></pre></div><h3>Mixed Content</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-footer&gt;
    &lt;div class=&quot;eui-u-flex eui-u-flex-justify-between&quot;&gt;
        &lt;span class=&quot;eui-u-text-muted&quot;&gt;Last updated: 2 hours ago&lt;/span&gt;
        &lt;eui-button euiSizeS&gt;Edit&lt;/eui-button&gt;
    &lt;/div&gt;
&lt;/eui-content-card-footer&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Ensure all interactive elements are keyboard accessible</li>
<li>Provide clear labels for all actions</li>
<li>Use appropriate button types (button vs link)</li>
<li>Maintain logical tab order</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Positioned at the bottom of the card with visual separation</li>
<li>Optional component - only include when actions or additional info needed</li>
<li>Commonly used for primary/secondary actions</li>
<li>Automatically styled with appropriate spacing and borders</li>
</ul>


**Selector:** `eui-content-card-footer`

**Standalone:** false
