# EuiContentCardBodyTopComponent

**Type:** component

<p>Container for content at the top of the card body. Used for highlighted information, alerts, or content that needs visual separation from the main body.</p>
<h3>Alert Message</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-body-top&gt;
    &lt;div class=&quot;eui-u-bg-warning-light eui-u-p-s&quot;&gt;
        &lt;strong&gt;Notice:&lt;/strong&gt; This item requires attention
    &lt;/div&gt;
&lt;/eui-content-card-body-top&gt;</code></pre></div><h3>Summary Information</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-body-top&gt;
    &lt;dl class=&quot;eui-u-flex eui-u-flex-gap-m&quot;&gt;
        &lt;div&gt;&lt;dt&gt;Status:&lt;/dt&gt;&lt;dd&gt;Active&lt;/dd&gt;&lt;/div&gt;
        &lt;div&gt;&lt;dt&gt;Progress:&lt;/dt&gt;&lt;dd&gt;75%&lt;/dd&gt;&lt;/div&gt;
    &lt;/dl&gt;
&lt;/eui-content-card-body-top&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use appropriate semantic elements for content type</li>
<li>Ensure alerts have proper ARIA roles when needed</li>
<li>Maintain color contrast for all content</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Positioned at the top of the body with visual separation</li>
<li>Optional component - only use when content needs emphasis</li>
<li>Commonly used for alerts, summaries, or key metrics</li>
<li>Automatically styled with appropriate spacing</li>
</ul>


**Selector:** `eui-content-card-body-top`

**Standalone:** false
