# EuiDashboardCardContentBodyComponent

**Type:** component

<p>Main content area for custom dashboard cards, typically displaying metrics, charts, or key information.
Provides flexible content projection for any type of dashboard data visualization.</p>
<h3>Metric Display</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-body&gt;
  &lt;div class=&quot;eui-u-f-3xl-bold&quot;&gt;1,247&lt;/div&gt;
  &lt;div class=&quot;eui-u-f-s eui-u-c-s-muted&quot;&gt;Total Orders&lt;/div&gt;
&lt;/eui-dashboard-card-content-body&gt;</code></pre></div><h3>With Trend Indicator</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-body&gt;
  &lt;div class=&quot;eui-u-f-2xl-bold&quot;&gt;$45,231&lt;/div&gt;
  &lt;div class=&quot;eui-u-flex eui-u-gap-xs&quot;&gt;
    &lt;eui-icon-svg icon=&quot;arrow-up:regular&quot; fillColor=&quot;success&quot; size=&quot;xs&quot;/&gt;
    &lt;span class=&quot;eui-u-c-s-success eui-u-f-s&quot;&gt;+18.2% from last week&lt;/span&gt;
  &lt;/div&gt;
&lt;/eui-dashboard-card-content-body&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic HTML for data presentation</li>
<li>Provide text alternatives for visual indicators (icons, colors)</li>
<li>Ensure metrics have descriptive labels for screen readers</li>
<li>Use appropriate ARIA attributes for dynamic content</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Main content area with flexible height</li>
<li>Supports any content: text, charts, lists, or custom components</li>
<li>Use utility classes for consistent typography and spacing</li>
<li>Grows to fill available space between header and footer</li>
</ul>


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

**Standalone:** false
