### 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

Example :

    <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

Example :

    <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

### Metadata

selector | `eui-dashboard-card-content-body`

template

    <ng-content />

styleUrl | `./eui-dashboard-card-content-body.scss`

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-dashboard-card-content-body'`
CSS class applied to the host element

### Properties

string
Type : `string`
Default value : `'eui-dashboard-card-content-body'`
Decorators : `@HostBinding('class')`
CSS class applied to the host element

# results matching ""

# No results matching ""