<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">
			<span class="avatar avatar-sm">AV</span>
			<span class="avatar">GN</span>
			<span class="avatar avatar-lg avatar-secondary">UI</span>
			<span class="avatar avatar-outline">
				<i class="ph ph-user"></i>
			</span>
			<span class="avatar avatar-success is-online">
				<i class="ph ph-check"></i>
				<span class="avatar-status"></span>
			</span>
			<span class="avatar">
				<img src="/assets/imgs/gnexus-mark.svg" alt="GNexus mark">
			</span>
		</div>
	</div>

	<div class="block">
		<h3 class="block-title">Identity row</h3>

		<div class="identity">
			<span class="avatar avatar-secondary is-online">
				AK
				<span class="avatar-status"></span>
			</span>
			<span class="identity-content">
				<span class="identity-title">Alex Kim</span>
				<span class="identity-meta">Product Designer</span>
			</span>
		</div>
	</div>

	<div class="block">
		<h3 class="block-title">Avatar stack</h3>

		<div class="avatar-stack" aria-label="Assigned users">
			<span class="avatar avatar-sm">AK</span>
			<span class="avatar avatar-sm avatar-secondary">JS</span>
			<span class="avatar avatar-sm avatar-warning">MR</span>
			<span class="avatar-stack-count">+4</span>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Avatar HTML</span>
			<button class="code-example-copy" type="button">Copy</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="code-example-copy" type="button">Copy</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="code-example-copy" type="button">Copy</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>