# EuiDashboardCardStatusContentComponent

**Type:** component

<p>Status indicator container for dashboard cards, displaying badges, chips, or status information.
Positioned separately from main content to highlight important state or metadata.</p>
<h3>Status Badge</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-status-content&gt;
  &lt;eui-chip euiSizeS euiSuccess&gt;Active&lt;/eui-chip&gt;
&lt;/eui-dashboard-card-status-content&gt;</code></pre></div><h3>Warning Status</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-status-content&gt;
  &lt;eui-chip euiSizeS euiOutline euiWarning&gt;Pending Review&lt;/eui-chip&gt;
&lt;/eui-dashboard-card-status-content&gt;</code></pre></div><h3>Multiple Indicators</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-status-content&gt;
  &lt;eui-badge euiInfo&gt;New&lt;/eui-badge&gt;
  &lt;eui-chip euiSizeS euiOutline&gt;Draft&lt;/eui-chip&gt;
&lt;/eui-dashboard-card-status-content&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Status information should be conveyed through text, not color alone</li>
<li>Use semantic elements (badges, chips) with descriptive text</li>
<li>Ensure sufficient color contrast for status indicators</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use alongside <code>eui-dashboard-card-content</code> for status display</li>
<li>Typically contains badges, chips, or status labels</li>
<li>Positioned independently from main card content</li>
<li>Supports multiple status indicators</li>
</ul>


**Selector:** `eui-dashboard-card-status-content`

**Standalone:** false
