# EuiAvatarContentComponent

**Type:** component

<p>Component for displaying textual content alongside an avatar.
Serves as a container for avatar-content-label and avatar-content-sublabel subcomponents.
Typically used to show user name and additional information like email or role.
Content is projected via ng-content and styled to align properly with the avatar.
Must be used within an eui-avatar parent component for proper layout.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-avatar&gt;
  &lt;eui-avatar-image src=&quot;user.jpg&quot;&gt;&lt;/eui-avatar-image&gt;
  &lt;eui-avatar-content&gt;
    &lt;eui-avatar-content-label&gt;John Doe&lt;/eui-avatar-content-label&gt;
    &lt;eui-avatar-content-sublabel&gt;john.doe&#64;ec.europa.eu&lt;/eui-avatar-content-sublabel&gt;
  &lt;/eui-avatar-content&gt;
&lt;/eui-avatar&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Content is readable by screen readers in natural reading order</li>
<li>Label and sublabel are semantically grouped for context</li>
<li>Use meaningful text that identifies the user or entity</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of eui-avatar component</li>
<li>Typically contains eui-avatar-content-label and eui-avatar-content-sublabel</li>
<li>Layout can be reversed using isReverse on parent eui-avatar</li>
<li>Automatically styled to align with avatar size variants</li>
</ul>


**Selector:** `eui-avatar-content`

**Standalone:** false
