### 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

- toggleBookmark
- toggleCollapse

###### Inputs

- e2eAttr
- isBookmarkable
- isBookmarked
- isCollapsed
- isCollapsible
- isSelectable
- isSelected

###### Outputs

- cardBookmark
- cardCollapse
- cardSelect

###### HostBindings

- class

###### Accessors

- cssClasses

### 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
get `cssClasses()`
Computes and returns the CSS classes for the component based on its current state. Returns : `string`

# results matching ""

# No results matching ""