eui documentation
  1. Components
  2. EuiCardComponent

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
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()

Computes and returns the CSS classes for the component based on its current state.

Returns : string

results matching ""

    No results matching ""