# EuiContentCardComponent

**Type:** component



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
```html
<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
```html
<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


**Selector:** `eui-content-card`

## Inputs
- **e2eAttr**: `string` - Sets the `data-e2e` attribute at the host element.
- **isBookmarkable**: `boolean` - Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
- **isBookmarked**: `boolean` - Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.
- **isCollapsed**: `boolean` - Sets the `isCollapsed` attribute which collapses the card content.
- **isCollapsible**: `boolean` - Sets the `isCollapsible` attribute which shows the collapsible toggle in the header.
- **isSelectable**: `boolean` - Sets the `isSelectable` attribute in order to show the card header checkbox for selection
- **isSelected**: `boolean` - Sets the `isSelected` attribute in order to show the card header as selected.

## Outputs
- **cardBookmark**: `EventEmitter` - Event emitted when the card is bookmarked.
- **cardCollapse**: `EventEmitter` - Event emitted when the card is bookmarked.
- **cardSelect**: `EventEmitter` - Event emitted when the card is selected.