# EuiCardComponent

**Type:** component



`eui-card` 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.

The component supports multiple visual states (selection, urgency, loading, disabled), sizes, collapsible behavior, and deterministic state synchronization through an internal UI state service.

It is designed to be **structural**, **deterministic**, and **state-driven**, without requiring custom CSS or inferred behavior.

#### Basic card
```html
<eui-card>
  <eui-card-header>
    <eui-card-header-title>Card Title</eui-card-header-title>
    <eui-card-header-subtitle>Subtitle</eui-card-header-subtitle>
  </eui-card-header>
  <eui-card-content>
    Card content goes here
  </eui-card-content>
  <eui-card-footer>
    <button euiButton>Action</button>
  </eui-card-footer>
</eui-card>
```

#### Collapsible card
```html
<eui-card
  [euiCollapsible]="true"
  [euiCollapsed]="isCollapsed"
  (collapse)="onCollapse($event)">
  <eui-card-header>
    <eui-card-header-title>Collapsible Card</eui-card-header-title>
  </eui-card-header>
  <eui-card-content>Content that can be collapsed</eui-card-content>
</eui-card>
```

#### Selected and urgent states
```html
<eui-card [euiSelected]="true" [euiUrgent]="true">
  <eui-card-header>
    <eui-card-header-title>Important Card</eui-card-header-title>
  </eui-card-header>
  <eui-card-content>Urgent content</eui-card-content>
</eui-card>
```

#### Clickable card with hover effect
```html
<eui-card
  [isClickeable]="true"
  [euiHoverable]="true"
  (cardClick)="onCardClick($event)">
  <eui-card-content>Click me</eui-card-content>
</eui-card>
```

```ts
onCollapse(isCollapsed: boolean): void {
  console.log('Card collapsed:', isCollapsed);
}

onCardClick(card: EuiCardComponent): void {
  console.log('Card clicked');
}
```

### Accessibility
- Card structure provides semantic grouping of related content
- Collapsible cards use appropriate ARIA attributes for expand/collapse state
- Selected and urgent states are visually distinct and announced to screen readers
- Clickable cards are keyboard accessible when isClickeable is true
- Loading and disabled states prevent interaction and are announced
- Ensure interactive elements within cards have proper focus management

### Notes
- Typically contains eui-card-header, eui-card-content, and eui-card-footer children
- Size variants: euiSizeXS, euiSizeS, euiSizeM (default), euiSizeL, euiSizeXL, euiSize2XL
- Color variants: euiPrimary, euiSecondary, euiInfo, euiSuccess, euiWarning, euiDanger
- euiCollapsible enables collapse/expand functionality with toggle button
- euiCollapsed controls collapsed state (use with euiCollapsible)
- euiSelected applies selected state styling (typically for card selection)
- euiUrgent applies urgent state styling (for high-priority content)
- euiHighlighted applies highlighted state styling
- euiDisabled disables all interactions within the card
- euiLoading shows loading state with spinner
- euiNoShadow removes default card shadow
- euiNoContentPadding removes padding from card content area
- euiHoverable adds hover effect styling
- hasLeftExpander positions collapse toggle on left side
- isCompact reduces spacing for compact layouts
- isClickeable makes entire card clickable, emits cardClick event
- collapse event emits when card is collapsed/expanded
- State is managed internally via UiStateService for deterministic behavior


**Selector:** `eui-card`

## Inputs
- **e2eAttr**: `string` - Sets the `data-e2e` attribute at the host element.
- **euiCollapsed**: `boolean` - Sets the `euiCollapsed` attribute which collapses the card content.
- **euiCollapsible**: `boolean` - Sets the `euiCollapsible` attribute which shows the collapsible toggle in the header.
- **euiHoverable**: `boolean` - Sets the `euiHoverable` attribute in order to show the hover effect on the card.
- **euiNoContentPadding**: `boolean` - Sets the `euiNoContentPadding` attribute in order to remove the padding from the card content.
- **euiNoShadow**: `boolean` - Sets the `euiNoShadow` attribute in order to remove the shadow from the card.
- **euiSelected**: `boolean` - Sets the `euiSelected` attribute in order to show the card header as selected.
- **euiUrgent**: `boolean` - Sets the `euiUrgent` attribute in order to show the card header as urgent.
- **hasLeftExpander**: `boolean` - Sets the `hasLeftExpander` attribute to display the expander button on the left of the card.
- **isCompact**: `boolean` - Input property to display the card header and content in compact view
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiHighlighted**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDisabled**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiLoading**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSize2XL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

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