<section class="section docs-section" id="alerts">
                  <h2 class="section-title">Alerts</h2>
                  <p class="docs-section-description">Alerts подходят для заметных системных сообщений внутри контента. Используй alert и один цветовой модификатор.</p>
                  <GnAlert variant="primary">This is a primary alert—check it out!</GnAlert>
                  <GnAlert variant="success">This is a success alert—check it out!</GnAlert>
                  <GnAlert variant="secondary">This is a secondary alert—check it out!</GnAlert>
                  <GnAlert variant="info">This is a info alert—check it out!</GnAlert>
                  <GnAlert variant="warning">This is a warning alert—check it out!</GnAlert>
                  <GnAlert variant="danger">This is a error/danger alert—check it out!</GnAlert>
                
<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>