File

packages/components/eui-dashboard-card/eui-dashboard-card-content-body.ts

Description

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.

Metric Display

<eui-dashboard-card-content-body>
  <div class="eui-u-f-3xl-bold">1,247</div>
  <div class="eui-u-f-s eui-u-c-s-muted">Total Orders</div>
</eui-dashboard-card-content-body>

With Trend Indicator

<eui-dashboard-card-content-body>
  <div class="eui-u-f-2xl-bold">$45,231</div>
  <div class="eui-u-flex eui-u-gap-xs">
    <eui-icon-svg icon="arrow-up:regular" fillColor="success" size="xs"/>
    <span class="eui-u-c-s-success eui-u-f-s">+18.2% from last week</span>
  </div>
</eui-dashboard-card-content-body>

Accessibility

• Use semantic HTML for data presentation
• Provide text alternatives for visual indicators (icons, colors)
• Ensure metrics have descriptive labels for screen readers
• Use appropriate ARIA attributes for dynamic content

Notes

• Main content area with flexible height
• Supports any content: text, charts, lists, or custom components
• Use utility classes for consistent typography and spacing
• Grows to fill available space between header and footer

<ng-content />