<section class="section docs-section" id="chips">
                  <h2 class="section-title">Chips</h2>
                  <p class="docs-section-description">Chips используются для фильтров, коротких labels, selectable states и removable tokens.</p>
                  <div class="block">
                    <h3 class="block-title">Static chips</h3>
                    <GnChipGroup>
                      <GnChip variant="primary">Primary</GnChip>
                      <GnChip variant="secondary">Secondary</GnChip>
                      <GnChip variant="success">Success</GnChip>
                      <GnChip variant="warning">Warning</GnChip>
                      <GnChip variant="danger">Error</GnChip>
                      <GnChip variant="secondary" icon="ph-funnel">Filtered</GnChip>
                    </GnChipGroup>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Selectable chips</h3>
                    <GnChipGroup>
                      <GnChip selected>Active</GnChip>
                      <GnChip>Queued</GnChip>
                      <GnChip>Failed</GnChip>
                      <GnChip disabled>Archived</GnChip>
                    </GnChipGroup>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Removable chips</h3>
                    <GnChipGroup>
                      <GnChip removable>Frontend</GnChip>
                      <GnChip variant="success" removable>Design</GnChip>
                      <GnChip variant="warning" removable>Review</GnChip>
                    </GnChipGroup>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Static Chips 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="chip-group"&gt;
  &lt;span class="chip chip-primary"&gt;Primary&lt;/span&gt;
  &lt;span class="chip chip-secondary"&gt;Secondary&lt;/span&gt;
  &lt;span class="chip chip-success"&gt;Success&lt;/span&gt;
  &lt;span class="chip"&gt;
    &lt;i class="ph ph-funnel"&gt;&lt;/i&gt;
    Filtered
  &lt;/span&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Selectable Chips 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="chip-group" aria-label="Filter chips"&gt;
  &lt;button class="chip chip-selected" type="button" aria-pressed="true"&gt;Active&lt;/button&gt;
  &lt;button class="chip" type="button" aria-pressed="false"&gt;Queued&lt;/button&gt;
  &lt;button class="chip" type="button" aria-pressed="false"&gt;Failed&lt;/button&gt;
&lt;/div&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Removable Chips 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="chip"&gt;
  Frontend
  &lt;button class="chip-remove" type="button" aria-label="Remove Frontend"&gt;
    &lt;i class="ph ph-x"&gt;&lt;/i&gt;
  &lt;/button&gt;
&lt;/span&gt;</code></pre>
	</div>
</section>