### File

`packages/components/eui-dashboard-card/eui-dashboard-card.component.ts`

### Description

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

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiVariant euiSizeXS euiSizeS euiSizeM euiSizeL euiSizeXL euiSize2XL euiSizeVariant euiDisabled euiOutline
selector | `eui-dashboard-card`
imports | `NgClass` `RouterModule` `NgTemplateOutlet` `EUI_AVATAR` `EUI_LABEL` `EUI_ICON`
templateUrl | `./eui-dashboard-card.component.html`
styleUrl | `eui-dashboard-card.scss`

### Index

###### Properties

- baseStatesDirective
- customContent

###### Methods

- onClick

###### Inputs

- e2eAttr
- hasNoBackgroundAvatar
- iconLabel
- iconSvgName
- iconSvgSize
- imageUrl
- isClickeable
- isFlat
- isFlatAvatar
- isHorizontal
- isStacked
- label
- labelMaxLines
- subLabel
- subLabelMaxLines
- url
- urlExternal
- urlExternalTarget

###### Outputs

- cardClick

###### HostBindings

- attr.tabindex
- class

###### HostListeners

- click

###### Accessors

- cssClasses
- tabindex

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-dashboard-card'`
Element attribute for e2e testing

hasNoBackgroundAvatar
Type : `boolean`
Default value : `false`
Whether to display the avatar without background

iconLabel
Type : `string`
Label for the icon (accessibility)

iconSvgName
Type : `string`
Name of the icon to display

iconSvgSize
Type : `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"`
Default value : `'m'`
Size of the icon

imageUrl
Type : `string`
URL for the avatar image

isClickeable
Type : `boolean`
Default value : `false`
Whether the card is clickable

isFlat
Type : `boolean`
Default value : `false`
Whether to display the card without elevation

isFlatAvatar
Type : `boolean`
Default value : `false`
Whether to display the avatar without elevation

isHorizontal
Type : `boolean`
Default value : `false`
Whether to display the card in horizontal layout

isStacked
Type : `boolean`
Default value : `false`
Whether to display the card without elevation

label
Type : `string`
Primary label/title of the card

labelMaxLines
Type : `"1" | "2" | "3" | "4" | "5"`
Default value : `2`
Maximum number of lines for the primary label

subLabel
Type : `string`
Secondary label/subtitle of the card

subLabelMaxLines
Type : `"1" | "2" | "3" | "4" | "5"`
Default value : `2`
Maximum number of lines for the secondary label

url
Type : `string`
Internal router link URL

urlExternal
Type : `string`
External URL

urlExternalTarget
Type : `string`
Default value : `'_blank'`
Target attribute for external URLs

### Outputs

cardClick
Type : `EventEmitter`
Event emitted when the card is clicked

### HostBindings

attr.tabindex
Type : `string`
Tab index for keyboard navigation

class
Type : `string`

### HostListeners

click
Arguments : `'$event'`
`click(event: MouseEvent)`
Handles card click events

### Methods

onClick
`onClick(event: MouseEvent)`
Decorators : `@HostListener('click', ['$event'])`

Handles card click events

Parameters :

Name | Type | Optional
event | `MouseEvent` | No

Returns : `void`

### Properties

baseStatesDirective
Default value : `inject(BaseStatesDirective)`

customContent
Type : `QueryList<EuiDashboardCardContentComponent>`
Decorators : `@ContentChild(undefined)`
Reference to the custom content component

### Accessors

cssClasses
get `cssClasses()`

Computes and returns the CSS classes for the dashboard card component based on its current state:

- Adds base dashboard card classes
- Adds horizontal layout class if isHorizontal is true
- Adds link class if the card is clickable or has a URL
- Adds flat class if isFlat is true

Returns : `string`

tabindex
get `tabindex()`
Tab index for keyboard navigation Returns : `string`

# results matching ""

# No results matching ""