# EuiDashboardCardContentHeaderComponent

**Type:** component

<p>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.</p>
<h3>Basic Header</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-header&gt;
  &lt;eui-dashboard-card-content-header-icon icon=&quot;chart-bar:regular&quot;/&gt;
  &lt;eui-dashboard-card-content-header-title&gt;
    Revenue
  &lt;/eui-dashboard-card-content-header-title&gt;
&lt;/eui-dashboard-card-content-header&gt;</code></pre></div><h3>With Action Button</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card-content-header&gt;
  &lt;eui-dashboard-card-content-header-icon icon=&quot;users:regular&quot;/&gt;
  &lt;eui-dashboard-card-content-header-title&gt;
    Active Users
  &lt;/eui-dashboard-card-content-header-title&gt;
  &lt;eui-dashboard-card-content-header-action&gt;
    &lt;eui-icon-button icon=&quot;eui-settings&quot; size=&quot;s&quot; aria-label=&quot;Settings&quot;/&gt;
  &lt;/eui-dashboard-card-content-header-action&gt;
&lt;/eui-dashboard-card-content-header&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic heading elements within title component</li>
<li>Provide aria-label for icon-only action buttons</li>
<li>Ensure sufficient color contrast for icons and text</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Automatically arranges icon, title, and action in a flex layout</li>
<li>Icon and action sections are optional</li>
<li>Title section grows to fill available space</li>
<li>Combine with other content sub-components for complete card structure</li>
</ul>


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

**Standalone:** false
