# EuiContentCardComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card&gt;
    &lt;eui-content-card-header&gt;
        &lt;eui-content-card-header-title&gt;Card Title&lt;/eui-content-card-header-title&gt;
    &lt;/eui-content-card-header&gt;
    &lt;eui-content-card-body&gt;Card content goes here&lt;/eui-content-card-body&gt;
&lt;/eui-content-card&gt;</code></pre></div><h3>With Selection and Collapse</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-content-card
    [isSelectable]=&quot;true&quot;
    [isCollapsible]=&quot;true&quot;
    (cardSelect)=&quot;onCardSelect($event)&quot;
    (cardCollapse)=&quot;onCardCollapse($event)&quot;&gt;
    &lt;eui-content-card-header&gt;
        &lt;eui-content-card-header-title&gt;Collapsible Card&lt;/eui-content-card-header-title&gt;
    &lt;/eui-content-card-header&gt;
    &lt;eui-content-card-body&gt;This content can be collapsed&lt;/eui-content-card-body&gt;
&lt;/eui-content-card&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use semantic heading levels within card titles for proper document structure</li>
<li>Ensure interactive elements (checkboxes, buttons) have appropriate labels</li>
<li>When using selection, the checkbox is automatically managed with proper ARIA attributes</li>
<li>Collapsible cards use icon buttons with appropriate accessibility labels</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Cards can be made selectable with <code>isSelectable</code> input</li>
<li>Cards can be made collapsible with <code>isCollapsible</code> input</li>
<li>Bookmarking functionality is available via <code>isBookmarkable</code> input</li>
<li>All interactive features emit events for state changes</li>
<li>Use with child components for structured content layout</li>
</ul>


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

**Standalone:** false

## Inputs

- **e2eAttr**: `string` - <p>Sets the <code>data-e2e</code> attribute at the host element.</p>

- **isBookmarkable**: `boolean` - <p>Sets the <code>isBookmarkable</code> attribute which is adding a bookmark toggle to the card header end-block.</p>

- **isBookmarked**: `boolean` - <p>Sets the <code>isBookmarkable</code> attribute which is adding a bookmark toggle to the card header end-block.</p>

- **isCollapsed**: `boolean` - <p>Sets the <code>isCollapsed</code> attribute which collapses the card content.</p>

- **isCollapsible**: `boolean` - <p>Sets the <code>isCollapsible</code> attribute which shows the collapsible toggle in the header.</p>

- **isSelectable**: `boolean` - <p>Sets the <code>isSelectable</code> attribute in order to show the card header checkbox for selection</p>

- **isSelected**: `boolean` - <p>Sets the <code>isSelected</code> attribute in order to show the card header as selected.</p>


## Outputs

- **cardBookmark**: `EventEmitter` - <p>Event emitted when the card is bookmarked.</p>

- **cardCollapse**: `EventEmitter` - <p>Event emitted when the card is bookmarked.</p>

- **cardSelect**: `EventEmitter` - <p>Event emitted when the card is selected.</p>

