eui documentation
  1. Components
  2. EuiContentCardComponent

File

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

Description

The eui-content-card component is based on Material Design and provides a content container for text, photos and actions in the context of a single subject. Supports selection, collapsing, and bookmarking functionality.

Basic Usage

Example :
<eui-content-card>
    <eui-content-card-header>
        <eui-content-card-header-title>Card Title</eui-content-card-header-title>
    </eui-content-card-header>
    <eui-content-card-body>Card content goes here</eui-content-card-body>
</eui-content-card>

With Selection and Collapse

Example :
<eui-content-card
    [isSelectable]="true"
    [isCollapsible]="true"
    (cardSelect)="onCardSelect($event)"
    (cardCollapse)="onCardCollapse($event)">
    <eui-content-card-header>
        <eui-content-card-header-title>Collapsible Card</eui-content-card-header-title>
    </eui-content-card-header>
    <eui-content-card-body>This content can be collapsed</eui-content-card-body>
</eui-content-card>

Accessibility

  • Use semantic heading levels within card titles for proper document structure
  • Ensure interactive elements (checkboxes, buttons) have appropriate labels
  • When using selection, the checkbox is automatically managed with proper ARIA attributes
  • Collapsible cards use icon buttons with appropriate accessibility labels

Notes

  • Cards can be made selectable with isSelectable input
  • Cards can be made collapsible with isCollapsible input
  • Bookmarking functionality is available via isBookmarkable input
  • All interactive features emit events for state changes
  • Use with child components for structured content layout

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
selector eui-content-card
imports FormsModule EUI_INPUT_CHECKBOX
templateUrl ./eui-content-card.component.html
styleUrl ./eui-content-card.scss

Index

Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-content-card'

Sets the data-e2e attribute at the host element.
isBookmarkable
Type : boolean
Default value : false

Sets the isBookmarkable attribute which is adding a bookmark toggle to the card header end-block.
isBookmarked
Type : boolean
Default value : false

Sets the isBookmarkable attribute which is adding a bookmark toggle to the card header end-block.
isCollapsed
Type : boolean
Default value : false

Sets the isCollapsed attribute which collapses the card content.
isCollapsible
Type : boolean
Default value : false

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

Sets the isSelectable attribute in order to show the card header checkbox for selection
isSelected
Type : boolean
Default value : false

Sets the isSelected attribute in order to show the card header as selected.

Outputs

cardBookmark
Type : EventEmitter

Event emitted when the card is bookmarked.
cardCollapse
Type : EventEmitter

Event emitted when the card is bookmarked.
cardSelect
Type : EventEmitter

Event emitted when the card is selected.

HostBindings

class
Type : string

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

Methods

toggleBookmark
toggleBookmark()
Returns : void
toggleCollapse
toggleCollapse()
Returns : void

Accessors

cssClasses
getcssClasses()

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

Returns : string

results matching ""

    No results matching ""