# EuiAvatarContentSublabelComponent

**Type:** component

<p>Component for displaying secondary label text within avatar content.
Typically used to show additional information like email, role, or status.
Content is projected via ng-content and styled as secondary/subdued text.
Must be used within eui-avatar-content for proper styling and layout.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-avatar&gt;
  &lt;eui-avatar-text&gt;JD&lt;/eui-avatar-text&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>Text content is directly readable by screen readers</li>
<li>Appears after label in reading order</li>
<li>Provides additional context about the user or entity</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be child of eui-avatar-content component</li>
<li>Styled as secondary/muted text</li>
<li>Typically displays email, role, department, or status</li>
<li>Optional - can be omitted if only primary label is needed</li>
</ul>


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

**Standalone:** false
