<section class="section docs-section" id="alerts">
	<h2 class="section-title">Alerts</h2>
	<p class="docs-section-description">
		Alerts подходят для заметных системных сообщений внутри контента.
		Используй `.alert` и один цветовой модификатор.
	</p>

	<div class="alert alert-primary">This is a primary alert—check it out!</div>
	<div class="alert alert-success">This is a success alert—check it out!</div>
	<div class="alert alert-secondary">This is a secondary alert—check it out!</div>
	<div class="alert alert-info">This is a info alert—check it out!</div>
	<div class="alert alert-warning">This is a warning alert—check it out!</div>
	<div class="alert alert-error">This is a error/danger alert—check it out!</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Alerts 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="alert alert-primary"&gt;Primary message&lt;/div&gt;
&lt;div class="alert alert-success"&gt;Operation completed&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;Check settings&lt;/div&gt;
&lt;div class="alert alert-error"&gt;Action failed&lt;/div&gt;</code></pre>
	</div>
</section>