# EuiContentCardHeaderMetadataComponent

**Type:** component

<p>Container for primary metadata information displayed below the subtitle. Used for key details like dates, authors, or categories.</p>
<h3>Simple Metadata</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-header-metadata&gt;
    Created: January 26, 2024
&lt;/eui-content-card-header-metadata&gt;</code></pre></div><h3>Multiple Metadata Items</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-header-metadata&gt;
    Author: John Doe | Category: Research | Status: Published
&lt;/eui-content-card-header-metadata&gt;</code></pre></div><h3>With Semantic Markup</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-header-metadata&gt;
    &lt;time datetime=&quot;2024-01-26&quot;&gt;January 26, 2024&lt;/time&gt; |
    &lt;span&gt;5 min read&lt;/span&gt;
&lt;/eui-content-card-header-metadata&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic HTML elements like <code>&lt;time&gt;</code> for dates</li>
<li>Ensure metadata is meaningful and not purely decorative</li>
<li>Maintain sufficient color contrast</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Displayed below subtitle with reduced visual weight</li>
<li>Use for factual information about the card content</li>
<li>Separate multiple items with visual dividers (e.g., pipes)</li>
<li>Keep concise to maintain scannability</li>
</ul>


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

**Standalone:** false
