# EuiDashboardCardContentHeaderComponent

**Type:** component



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
```html
<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
```html
<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


**Selector:** `eui-dashboard-card-content-header`