### File

`packages/components/eui-card/eui-card.component.ts`

### Description

`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

Example :

    <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

Example :

    <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

Example :

    <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

Example :

    <eui-card
      [isClickeable]="true"
      [euiHoverable]="true"
      (cardClick)="onCardClick($event)">
      <eui-card-content>Click me</eui-card-content>
    </eui-card>

Example :

    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

### Implements

`AfterContentInit` `OnDestroy` `OnInit` `OnChanges`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiHighlighted euiDisabled euiLoading euiSizeXS euiSizeS euiSizeM euiSizeL euiSizeXL euiSize2XL euiSizeVariant
providers | `UiStateService`
selector | `eui-card`
imports | `NgTemplateOutlet`
templateUrl | `./eui-card.component.html`
styleUrl | `./eui-card.scss`

### Index

###### Properties
Public uiStateService
###### Inputs
e2eAttr euiCollapsed euiCollapsible euiHoverable euiNoContentPadding euiNoShadow euiSelected euiUrgent hasLeftExpander isCompact
###### Outputs
collapse
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-card'`
Sets the `data-e2e` attribute at the host element.

euiCollapsed
Type : `boolean`
Default value : `false`
Sets the `euiCollapsed` attribute which collapses the card content.

euiCollapsible
Type : `boolean`
Default value : `false`
Sets the `euiCollapsible` attribute which shows the collapsible toggle in the header.

euiHoverable
Type : `boolean`
Default value : `false`
Sets the `euiHoverable` attribute in order to show the hover effect on the card.

euiNoContentPadding
Type : `boolean`
Default value : `false`
Sets the `euiNoContentPadding` attribute in order to remove the padding from the card content.

euiNoShadow
Type : `boolean`
Default value : `false`
Sets the `euiNoShadow` attribute in order to remove the shadow from the card.

euiSelected
Type : `boolean`
Default value : `false`
Sets the `euiSelected` attribute in order to show the card header as selected.

euiUrgent
Type : `boolean`
Default value : `false`
Sets the `euiUrgent` attribute in order to show the card header as urgent.

hasLeftExpander
Type : `boolean`
Default value : `false`
Sets the `hasLeftExpander` attribute to display the expander button on the left of the card.

isCompact
Type : `boolean`
Default value : `false`
Input property to display the card header and content in compact view

### Outputs

collapse
Type : `EventEmitter<boolean>`
Event emitted when the card collapses.

### HostBindings

class
Type : `string`
Computes and returns the CSS classes for the component based on its current state.

### Properties

Public uiStateService
Type : `UiStateService`
Default value : `inject(UiStateService)`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""