eui documentation
  1. Components
  2. EuiDashboardCardComponent

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.

Basic Usage

Example :
<eui-dashboard-card
  label="Project Status"
  subLabel="Last updated today"
  iconSvgName="eui-folder">
</eui-dashboard-card>

With Navigation

Example :
<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

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger 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
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Inputs

colorPalette
Type : string

Extra color palette to be used on the card.
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

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

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
Type : unknown
Default value : inject(BaseStatesDirective)
customContent
Type : QueryList<EuiDashboardCardContentComponent>
Decorators :
@ContentChild(undefined)

Reference to the custom content component

Accessors

cssClasses
getcssClasses()

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
gettabindex()

Tab index for keyboard navigation

Returns : string

results matching ""

    No results matching ""