# EuiCardComponent

**Type:** component

<p><code>eui-card</code> is a container component based on Material Design principles.
It provides a structured surface to group related content such as text, media, and actions around a single subject.</p>
<p>The component supports multiple visual states (selection, urgency, loading, disabled), sizes, collapsible behavior, and deterministic state synchronization through an internal UI state service.</p>
<p>It is designed to be <strong>structural</strong>, <strong>deterministic</strong>, and <strong>state-driven</strong>, without requiring custom CSS or inferred behavior.</p>
<h4>Basic card</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-card&gt;
  &lt;eui-card-header&gt;
    &lt;eui-card-header-title&gt;Card Title&lt;/eui-card-header-title&gt;
    &lt;eui-card-header-subtitle&gt;Subtitle&lt;/eui-card-header-subtitle&gt;
  &lt;/eui-card-header&gt;
  &lt;eui-card-content&gt;
    Card content goes here
  &lt;/eui-card-content&gt;
  &lt;eui-card-footer&gt;
    &lt;button euiButton&gt;Action&lt;/button&gt;
  &lt;/eui-card-footer&gt;
&lt;/eui-card&gt;</code></pre></div><h4>Collapsible card</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-card
  [euiCollapsible]=&quot;true&quot;
  [euiCollapsed]=&quot;isCollapsed&quot;
  (collapse)=&quot;onCollapse($event)&quot;&gt;
  &lt;eui-card-header&gt;
    &lt;eui-card-header-title&gt;Collapsible Card&lt;/eui-card-header-title&gt;
  &lt;/eui-card-header&gt;
  &lt;eui-card-content&gt;Content that can be collapsed&lt;/eui-card-content&gt;
&lt;/eui-card&gt;</code></pre></div><h4>Selected and urgent states</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-card [euiSelected]=&quot;true&quot; [euiUrgent]=&quot;true&quot;&gt;
  &lt;eui-card-header&gt;
    &lt;eui-card-header-title&gt;Important Card&lt;/eui-card-header-title&gt;
  &lt;/eui-card-header&gt;
  &lt;eui-card-content&gt;Urgent content&lt;/eui-card-content&gt;
&lt;/eui-card&gt;</code></pre></div><h4>Clickable card with hover effect</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-card
  [isClickeable]=&quot;true&quot;
  [euiHoverable]=&quot;true&quot;
  (cardClick)=&quot;onCardClick($event)&quot;&gt;
  &lt;eui-card-content&gt;Click me&lt;/eui-card-content&gt;
&lt;/eui-card&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">onCollapse(isCollapsed: boolean): void {
  console.log(&#39;Card collapsed:&#39;, isCollapsed);
}

onCardClick(card: EuiCardComponent): void {
  console.log(&#39;Card clicked&#39;);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Card structure provides semantic grouping of related content</li>
<li>Collapsible cards use appropriate ARIA attributes for expand/collapse state</li>
<li>Selected and urgent states are visually distinct and announced to screen readers</li>
<li>Clickable cards are keyboard accessible when isClickeable is true</li>
<li>Loading and disabled states prevent interaction and are announced</li>
<li>Ensure interactive elements within cards have proper focus management</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Typically contains eui-card-header, eui-card-content, and eui-card-footer children</li>
<li>Size variants: euiSizeXS, euiSizeS, euiSizeM (default), euiSizeL, euiSizeXL, euiSize2XL</li>
<li>Color variants: euiPrimary, euiSecondary, euiInfo, euiSuccess, euiWarning, euiDanger</li>
<li>euiCollapsible enables collapse/expand functionality with toggle button</li>
<li>euiCollapsed controls collapsed state (use with euiCollapsible)</li>
<li>euiSelected applies selected state styling (typically for card selection)</li>
<li>euiUrgent applies urgent state styling (for high-priority content)</li>
<li>euiHighlighted applies highlighted state styling</li>
<li>euiDisabled disables all interactions within the card</li>
<li>euiLoading shows loading state with spinner</li>
<li>euiNoShadow removes default card shadow</li>
<li>euiNoContentPadding removes padding from card content area</li>
<li>euiHoverable adds hover effect styling</li>
<li>hasLeftExpander positions collapse toggle on left side</li>
<li>isCompact reduces spacing for compact layouts</li>
<li>isClickeable makes entire card clickable, emits cardClick event</li>
<li>collapse event emits when card is collapsed/expanded</li>
<li>State is managed internally via UiStateService for deterministic behavior</li>
</ul>


**Selector:** `eui-card`

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - <p>Sets the <code>data-e2e</code> attribute at the host element.</p>

- **euiCollapsed**: `boolean` - <p>Sets the <code>euiCollapsed</code> attribute which collapses the card content.</p>

- **euiCollapsible**: `boolean` - <p>Sets the <code>euiCollapsible</code> attribute which shows the collapsible toggle in the header.</p>

- **euiHoverable**: `boolean` - <p>Sets the <code>euiHoverable</code> attribute in order to show the hover effect on the card.</p>

- **euiNoContentPadding**: `boolean` - <p>Sets the <code>euiNoContentPadding</code> attribute in order to remove the padding from the card content.</p>

- **euiNoShadow**: `boolean` - <p>Sets the <code>euiNoShadow</code> attribute in order to remove the shadow from the card.</p>

- **euiSelected**: `boolean` - <p>Sets the <code>euiSelected</code> attribute in order to show the card header as selected.</p>

- **euiUrgent**: `boolean` - <p>Sets the <code>euiUrgent</code> attribute in order to show the card header as urgent.</p>

- **hasLeftExpander**: `boolean` - <p>Sets the <code>hasLeftExpander</code> attribute to display the expander button on the left of the card.</p>

- **isCompact**: `boolean` - <p>Input property to display the card header and content in compact view</p>


## Outputs

- **collapse**: `EventEmitter<boolean>` - <p>Event emitted when the card collapses.</p>

