eui documentation
  1. Components
  2. EuiDashboardCardStatusContentComponent

File

packages/components/eui-dashboard-card/eui-dashboard-card-status-content.component.ts

Description

Status indicator container for dashboard cards, displaying badges, chips, or status information. Positioned separately from main content to highlight important state or metadata.

Status Badge

Example :
<eui-dashboard-card-status-content>
  <eui-chip euiSizeS euiSuccess>Active</eui-chip>
</eui-dashboard-card-status-content>

Warning Status

Example :
<eui-dashboard-card-status-content>
  <eui-chip euiSizeS euiOutline euiWarning>Pending Review</eui-chip>
</eui-dashboard-card-status-content>

Multiple Indicators

Example :
<eui-dashboard-card-status-content>
  <eui-badge euiInfo>New</eui-badge>
  <eui-chip euiSizeS euiOutline>Draft</eui-chip>
</eui-dashboard-card-status-content>

Accessibility

  • Status information should be conveyed through text, not color alone
  • Use semantic elements (badges, chips) with descriptive text
  • Ensure sufficient color contrast for status indicators

Notes

  • Use alongside eui-dashboard-card-content for status display
  • Typically contains badges, chips, or status labels
  • Positioned independently from main card content
  • Supports multiple status indicators

Metadata

selector eui-dashboard-card-status-content
template 
<ng-content/>

Index

Properties
HostBindings

HostBindings

class
Type : string
Default value : 'eui-dashboard-card-status-content'

CSS class applied to the host element

Properties

string
Type : string
Default value : 'eui-dashboard-card-status-content'
Decorators :
@HostBinding('class')

CSS class applied to the host element

results matching ""

    No results matching ""