# EuiDashboardCardContentComponent

**Type:** component



Custom content container for EuiDashboardCard that enables fully customized card layouts.
Use this when the default card structure doesn't meet your needs and you want complete control
over the card's internal structure with header, body, and footer sections.

### Complete Custom Card
```html
<eui-dashboard-card>
  <eui-dashboard-card-content>
    <eui-dashboard-card-content-header>
      <eui-dashboard-card-content-header-icon icon="chart-line:regular"/>
      <eui-dashboard-card-content-header-title>
        Sales Overview
      </eui-dashboard-card-content-header-title>
      <eui-dashboard-card-content-header-action>
        <eui-icon-button icon="eui-ellipsis-vertical" size="s"/>
      </eui-dashboard-card-content-header-action>
    </eui-dashboard-card-content-header>
    <eui-dashboard-card-content-body>
      <div class="eui-u-f-2xl-bold">$24,500</div>
      <div class="eui-u-flex">
        <eui-icon-svg icon="arrow-up:regular" fillColor="success" size="xs"/>
        <span class="eui-u-c-s-success">+12% vs last month</span>
      </div>
    </eui-dashboard-card-content-body>
    <eui-dashboard-card-content-footer>
      <a class="eui-u-text-link" href="/reports">View full report</a>
    </eui-dashboard-card-content-footer>
  </eui-dashboard-card-content>
</eui-dashboard-card>
```

### Accessibility
- Maintains semantic structure with header, body, and footer sections
- Ensure interactive elements within have proper labels
- Use heading elements in title section for proper document outline

### Notes
- Provides complete flexibility for complex dashboard card layouts
- Combine with sub-components for structured content organization
- Use when default card props (label, subLabel, etc.) are insufficient
- Supports all dashboard card variants and sizes via parent component


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