# EuiDashboardCardComponent

**Type:** component

<p>Dashboard card component that can display content with various styling options, including avatar/icon, labels, and clickable behavior.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-dashboard-card
  label=&quot;Project Status&quot;
  subLabel=&quot;Last updated today&quot;
  iconSvgName=&quot;eui-folder&quot;&gt;
&lt;/eui-dashboard-card&gt;</code></pre></div><h3>With Navigation</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">&lt;eui-dashboard-card
  label=&quot;View Details&quot;
  url=&quot;/dashboard/details&quot;
  iconSvgName=&quot;eui-chart&quot;&gt;
&lt;/eui-dashboard-card&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Automatically sets <code>tabindex=&quot;0&quot;</code> when clickable or has URL for keyboard navigation</li>
<li>Use <code>iconLabel</code> to provide accessible text for icon-only cards</li>
<li>Card emits <code>cardClick</code> event for custom interactions</li>
<li>Supports disabled state via <code>euiDisabled</code> directive</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Use <code>isHorizontal</code> for side-by-side layout of avatar and content</li>
<li>Combine with <code>euiVariant</code> and size directives for visual hierarchy</li>
<li><code>labelMaxLines</code> and <code>subLabelMaxLines</code> control text truncation</li>
<li>External links automatically open in new tab with <code>urlExternalTarget</code></li>
</ul>


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

**Standalone:** false

## Inputs

- **colorPalette**: `string` - <p>Extra color palette to be used on the card.</p>

- **e2eAttr**: `string` - <p>Element attribute for e2e testing</p>

- **hasNoBackgroundAvatar**: `boolean` - <p>Whether to display the avatar without background</p>

- **iconLabel**: `string` - <p>Label for the icon (accessibility)</p>

- **iconSvgName**: `string` - <p>Name of the icon to display</p>

- **iconSvgSize**: `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"` - <p>Size of the icon</p>

- **imageUrl**: `string` - <p>URL for the avatar image</p>

- **isClickeable**: `boolean` - <p>Whether the card is clickable</p>

- **isFlat**: `boolean` - <p>Whether to display the card without elevation</p>

- **isFlatAvatar**: `boolean` - <p>Whether to display the avatar without elevation</p>

- **isHorizontal**: `boolean` - <p>Whether to display the card in horizontal layout</p>

- **isStacked**: `boolean` - <p>Whether to display the card without elevation</p>

- **label**: `string` - <p>Primary label/title of the card</p>

- **labelMaxLines**: `"1" | "2" | "3" | "4" | "5"` - <p>Maximum number of lines for the primary label</p>

- **subLabel**: `string` - <p>Secondary label/subtitle of the card</p>

- **subLabelMaxLines**: `"1" | "2" | "3" | "4" | "5"` - <p>Maximum number of lines for the secondary label</p>

- **url**: `string` - <p>Internal router link URL</p>

- **urlExternal**: `string` - <p>External URL</p>

- **urlExternalTarget**: `string` - <p>Target attribute for external URLs</p>


## Outputs

- **cardClick**: `EventEmitter` - <p>Event emitted when the card is clicked</p>

