<section class="section docs-section" id="avatar">
                  <h2 class="section-title">Avatar</h2>
                  <p class="docs-section-description">Avatar и Identity показывают пользователя, команду, сервис или объект с initials, icon, image и status marker.</p>
                  <div class="block">
                    <h3 class="block-title">Avatar variants</h3>
                    <div class="chip-group">
                      <GnAvatar initials="AV" size="sm" />
                      <GnAvatar initials="GN" />
                      <GnAvatar initials="UI" variant="secondary" size="lg" />
                      <GnAvatar icon="ph-user" outline />
                      <GnAvatar icon="ph-check" variant="success" status="online" />
                      <GnAvatar src="/assets/imgs/gnexus-mark.svg" />
                    </div>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Identity row</h3>
                    <GnIdentity title="Alex Kim" meta="Product Designer" :avatar="{ initials: 'AK', variant: 'secondary', status: 'online' }" />
                  </div>
                  <div class="block">
                    <h3 class="block-title">Avatar stack</h3>
                    <GnAvatarStack :items="[{ initials: 'AK', size: 'sm' }, { initials: 'JS', size: 'sm', variant: 'secondary' }, { initials: 'MR', size: 'sm', variant: 'warning' }]" count="4" />
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Avatar HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;span class="avatar avatar-secondary is-online"&gt;
  AK
  &lt;span class="avatar-status"&gt;&lt;/span&gt;
&lt;/span&gt;

&lt;span class="avatar avatar-outline"&gt;
  &lt;i class="ph ph-user"&gt;&lt;/i&gt;
&lt;/span&gt;

&lt;span class="avatar"&gt;
  &lt;img src="/assets/imgs/gnexus-mark.svg" alt="GNexus mark"&gt;
&lt;/span&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Identity HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="identity"&gt;
  &lt;span class="avatar avatar-secondary is-online"&gt;
    AK
    &lt;span class="avatar-status"&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;span class="identity-content"&gt;
    &lt;span class="identity-title"&gt;Alex Kim&lt;/span&gt;
    &lt;span class="identity-meta"&gt;Product Designer&lt;/span&gt;
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Avatar Stack HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="avatar-stack" aria-label="Assigned users"&gt;
  &lt;span class="avatar avatar-sm"&gt;AK&lt;/span&gt;
  &lt;span class="avatar avatar-sm avatar-secondary"&gt;JS&lt;/span&gt;
  &lt;span class="avatar avatar-sm avatar-warning"&gt;MR&lt;/span&gt;
  &lt;span class="avatar-stack-count"&gt;+4&lt;/span&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>