# EuiTreeListItemContentComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-tree-list-item&gt;
  &lt;eui-tree-list-item-content&gt;
    &lt;eui-icon-svg icon=&quot;eui-file&quot; size=&quot;s&quot; /&gt;
    &lt;span&gt;Document.pdf&lt;/span&gt;
    &lt;eui-badge euiInfo&gt;New&lt;/eui-badge&gt;
  &lt;/eui-tree-list-item-content&gt;
&lt;/eui-tree-list-item&gt;

&lt;!-- Complex content --&gt;
&lt;eui-tree-list-item&gt;
  &lt;eui-tree-list-item-content&gt;
    &lt;div class=&quot;custom-layout&quot;&gt;
      &lt;img src=&quot;icon.png&quot; alt=&quot;File icon&quot; /&gt;
      &lt;div&gt;
        &lt;strong&gt;File Name&lt;/strong&gt;
        &lt;small&gt;Last modified: 2 hours ago&lt;/small&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/eui-tree-list-item-content&gt;
&lt;/eui-tree-list-item&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Content should include appropriate semantic HTML</li>
<li>Images should have alt text</li>
<li>Interactive elements should be keyboard accessible</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Replaces default label rendering when used</li>
<li>Supports any HTML content or Angular components</li>
<li>Maintains consistent spacing and alignment</li>
<li>Works with expand/collapse functionality</li>
</ul>


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

**Standalone:** false
