# EuiContentCardHeaderComponent

**Type:** component

<p>Container component for the card header section. Supports title, subtitle, metadata, and action areas.
Automatically integrates with parent card&#39;s collapsible functionality.</p>
<h3>Basic Header</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-header&gt;
    &lt;eui-content-card-header-title&gt;Card Title&lt;/eui-content-card-header-title&gt;
    &lt;eui-content-card-header-subtitle&gt;Subtitle text&lt;/eui-content-card-header-subtitle&gt;
&lt;/eui-content-card-header&gt;</code></pre></div><h3>Complete Header with All Sections</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-header&gt;
    &lt;eui-content-card-header-start&gt;
        &lt;eui-chip euiSizeS&gt;Status&lt;/eui-chip&gt;
    &lt;/eui-content-card-header-start&gt;
    &lt;eui-content-card-header-title&gt;
        &lt;a href=&quot;#&quot; class=&quot;eui-u-text-link&quot;&gt;Linked Title&lt;/a&gt;
    &lt;/eui-content-card-header-title&gt;
    &lt;eui-content-card-header-subtitle&gt;Secondary information&lt;/eui-content-card-header-subtitle&gt;
    &lt;eui-content-card-header-metadata&gt;Created: 2024-01-26&lt;/eui-content-card-header-metadata&gt;
    &lt;eui-content-card-header-end&gt;
        &lt;eui-icon-button icon=&quot;eui-ellipsis-vertical&quot; size=&quot;s&quot;/&gt;
    &lt;/eui-content-card-header-end&gt;
&lt;/eui-content-card-header&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic heading elements within title component for proper document outline</li>
<li>Ensure links in titles have descriptive text</li>
<li>Action buttons should have accessible labels</li>
<li>Metadata should be marked up appropriately (e.g., <code>&lt;time&gt;</code> for dates)</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Header layout is flexible and adapts to included child components</li>
<li>Start and end sections are optional for additional content placement</li>
<li>Automatically handles collapse toggle when parent card is collapsible</li>
<li>Supports multiple metadata lines for complex information display</li>
</ul>


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

**Standalone:** false
