eui documentation
  1. Components
  2. EuiDashboardCardContentHeaderComponent

File

packages/components/eui-dashboard-card/eui-dashboard-card-content-header.ts

Description

Header section for custom dashboard card content, typically containing an icon, title, and action buttons. Provides a consistent layout for card headers with flexible content projection.

Basic Header

Example :
<eui-dashboard-card-content-header>
  <eui-dashboard-card-content-header-icon icon="chart-bar:regular"/>
  <eui-dashboard-card-content-header-title>
    Revenue
  </eui-dashboard-card-content-header-title>
</eui-dashboard-card-content-header>

With Action Button

Example :
<eui-dashboard-card-content-header>
  <eui-dashboard-card-content-header-icon icon="users:regular"/>
  <eui-dashboard-card-content-header-title>
    Active Users
  </eui-dashboard-card-content-header-title>
  <eui-dashboard-card-content-header-action>
    <eui-icon-button icon="eui-settings" size="s" aria-label="Settings"/>
  </eui-dashboard-card-content-header-action>
</eui-dashboard-card-content-header>

Accessibility

  • Use semantic heading elements within title component
  • Provide aria-label for icon-only action buttons
  • Ensure sufficient color contrast for icons and text

Notes

  • Automatically arranges icon, title, and action in a flex layout
  • Icon and action sections are optional
  • Title section grows to fill available space
  • Combine with other content sub-components for complete card structure

Metadata

selector eui-dashboard-card-content-header
templateUrl ./eui-dashboard-card-content-header.html
styleUrl ./eui-dashboard-card-content-header.scss

Index

Properties
HostBindings

HostBindings

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

CSS class applied to the host element

Properties

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

CSS class applied to the host element

results matching ""

    No results matching ""