# EuiContentCardBodyComponent

**Type:** component

<p>Container for the main content area of the card. Supports optional top section for highlighted content.
Content is hidden when the card is collapsed.</p>
<h3>Basic Body</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-body&gt;
    &lt;p&gt;Main card content goes here&lt;/p&gt;
&lt;/eui-content-card-body&gt;</code></pre></div><h3>With Top Section</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card-body&gt;
    &lt;eui-content-card-body-top&gt;
        &lt;div class=&quot;eui-u-bg-info-light eui-u-p-s&quot;&gt;
            Important notice or highlighted content
        &lt;/div&gt;
    &lt;/eui-content-card-body-top&gt;
    &lt;p&gt;Regular card content follows&lt;/p&gt;
&lt;/eui-content-card-body&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic HTML elements for content structure</li>
<li>Ensure proper heading hierarchy within body content</li>
<li>Maintain sufficient color contrast for all text</li>
<li>Make interactive elements keyboard accessible</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Primary content container for the card</li>
<li>Automatically hidden when parent card is collapsed</li>
<li>Can contain any HTML content or components</li>
<li>Use body-top for content that needs visual separation</li>
</ul>


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

**Standalone:** false
