# EuiDashboardCardComponent

**Type:** component



Dashboard card component that can display content with various styling options, including avatar/icon, labels, and clickable behavior.

### Basic Usage
```html
<eui-dashboard-card
  label="Project Status"
  subLabel="Last updated today"
  iconSvgName="eui-folder">
</eui-dashboard-card>
```

### With Navigation
```typescript
<eui-dashboard-card
  label="View Details"
  url="/dashboard/details"
  iconSvgName="eui-chart">
</eui-dashboard-card>
```

### Accessibility
- Automatically sets `tabindex="0"` when clickable or has URL for keyboard navigation
- Use `iconLabel` to provide accessible text for icon-only cards
- Card emits `cardClick` event for custom interactions
- Supports disabled state via `euiDisabled` directive

### Notes
- Use `isHorizontal` for side-by-side layout of avatar and content
- Combine with `euiVariant` and size directives for visual hierarchy
- `labelMaxLines` and `subLabelMaxLines` control text truncation
- External links automatically open in new tab with `urlExternalTarget`


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

## Inputs
- **colorPalette**: `string` - Extra color palette to be used on the card.
- **e2eAttr**: `string` - Element attribute for e2e testing
- **hasNoBackgroundAvatar**: `boolean` - Whether to display the avatar without background
- **iconLabel**: `string` - Label for the icon (accessibility)
- **iconSvgName**: `string` - Name of the icon to display
- **iconSvgSize**: `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"` - Size of the icon
- **imageUrl**: `string` - URL for the avatar image
- **isClickeable**: `boolean` - Whether the card is clickable
- **isFlat**: `boolean` - Whether to display the card without elevation
- **isFlatAvatar**: `boolean` - Whether to display the avatar without elevation
- **isHorizontal**: `boolean` - Whether to display the card in horizontal layout
- **isStacked**: `boolean` - Whether to display the card without elevation
- **label**: `string` - Primary label/title of the card
- **labelMaxLines**: `"1" | "2" | "3" | "4" | "5"` - Maximum number of lines for the primary label
- **subLabel**: `string` - Secondary label/subtitle of the card
- **subLabelMaxLines**: `"1" | "2" | "3" | "4" | "5"` - Maximum number of lines for the secondary label
- **url**: `string` - Internal router link URL
- **urlExternal**: `string` - External URL
- **urlExternalTarget**: `string` - Target attribute for external URLs
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize2XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDisabled**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiOutline**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **cardClick**: `EventEmitter` - Event emitted when the card is clicked