### 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

- string

###### HostBindings

- class

### 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 ""