<section class="section docs-section" id="badges">
                  <h2 class="section-title">Badges & Status</h2>
                  <p class="docs-section-description">Badges используются для коротких статусов, счётчиков и меток состояния. Цветовой модификатор выбирается по смыслу: success, warning, error, info и так далее.</p>
                  <div class="block">
                    <GnBadge variant="primary">Primary</GnBadge>
                    <GnBadge variant="secondary">Secondary</GnBadge>
                    <GnBadge variant="success">Success</GnBadge>
                    <GnBadge variant="warning">Warning</GnBadge>
                    <GnBadge variant="error">Error</GnBadge>
                    <GnBadge variant="info">Info</GnBadge>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Badges 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="badge badge-success"&gt;Online&lt;/span&gt;
&lt;span class="badge badge-warning"&gt;Degraded&lt;/span&gt;
&lt;span class="badge badge-error"&gt;Offline&lt;/span&gt;
&lt;span class="badge badge-info"&gt;Info&lt;/span&gt;</code></pre>
	</div>
</section>