# EuiTreeListItemContentComponent

**Type:** component



Content projection component for custom content within eui-tree-list-item.
Provides a structured container for rich content beyond simple labels.
Applies consistent styling for custom item content.
Must be used within eui-tree-list-item to define custom content areas.

### Basic Usage
```html
<eui-tree-list-item>
  <eui-tree-list-item-content>
    <eui-icon-svg icon="eui-file" size="s" />
    <span>Document.pdf</span>
    <eui-badge euiInfo>New</eui-badge>
  </eui-tree-list-item-content>
</eui-tree-list-item>

<!-- Complex content -->
<eui-tree-list-item>
  <eui-tree-list-item-content>
    <div class="custom-layout">
      <img src="icon.png" alt="File icon" />
      <div>
        <strong>File Name</strong>
        <small>Last modified: 2 hours ago</small>
      </div>
    </div>
  </eui-tree-list-item-content>
</eui-tree-list-item>
```

### Accessibility
- Content should include appropriate semantic HTML
- Images should have alt text
- Interactive elements should be keyboard accessible

### Notes
- Replaces default label rendering when used
- Supports any HTML content or Angular components
- Maintains consistent spacing and alignment
- Works with expand/collapse functionality


**Selector:** `eui-tree-list-item-content`