<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">
		<span class="badge badge-primary">Primary</span>
		<span class="badge badge-secondary">Secondary</span>
		<span class="badge badge-success">Success</span>
		<span class="badge badge-warning">Warning</span>
		<span class="badge badge-error">Error</span>
		<span class="badge badge-info">Info</span>
	</div>

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