# EuiContentCardHeaderSubmetadataComponent

**Type:** component

<p>Container for secondary metadata information displayed below the primary metadata. Used for supplementary details like ratings, statistics, or additional context.</p>
<h3>Rating Display</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-header-submetadata&gt;
    &lt;span class=&quot;eui-u-flex eui-u-flex-gap-2xs&quot;&gt;
        &lt;eui-icon-svg icon=&quot;star:fill&quot; fillColor=&quot;primary&quot; size=&quot;s&quot;/&gt;
        &lt;strong&gt;4.8&lt;/strong&gt; (156 reviews)
    &lt;/span&gt;
&lt;/eui-content-card-header-submetadata&gt;</code></pre></div><h3>Statistics</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-header-submetadata&gt;
    1.2K views • 45 comments
&lt;/eui-content-card-header-submetadata&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provide text alternatives for icon-only information</li>
<li>Use <code>aria-label</code> when icons convey meaning</li>
<li>Ensure color is not the only means of conveying information</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Displayed below primary metadata with minimal visual weight</li>
<li>Use for less critical but useful information</li>
<li>Often includes icons or visual indicators</li>
<li>Should not duplicate information from other header sections</li>
</ul>


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

**Standalone:** false
