<section class="section docs-section" id="cards">
	<h2 class="section-title">Cards</h2>
	<p class="docs-section-description">
		Card подходит для компактных виджетов и контентных блоков.
		Цветовые состояния карточек задаются модификаторами `card-success`, `card-warning`, `card-error`, `card-info`.
	</p>

	<div class="cards">
		<div class="card">
			<h3 class="card-title">Card title</h3>

			<div class="card-content">
				<img src="/assets/imgs/gnexus-mark.svg" alt="" class="card-thumb">
				<p>Карточка для контента, виджетов, статусов.</p>
			</div>

			<div class="card-footer">
				<button class="btn btn-accent">Action</button>
			</div>
		</div>
	</div>

	<div class="block mt-6">
		<div class="row g-4">
			<div class="card status-card card-success">
				<span class="card-title">Status title</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-check-circle"></i> OK
						</div>
					</div>

					<p class="status-name">Primary status card with a short description.</p>
				</div>
			</div>

			<div class="card status-card card-primary">
				<span class="card-title">Default</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-stack"></i>
						</div>
					</div>

					<p class="status-name">Neutral card for a module, widget, or section.</p>
				</div>
			</div>

			<div class="card status-card card-warning">
				<span class="card-title">Pending</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-warning"></i>
						</div>
					</div>

					<p class="status-name">Warning state for items that need attention.</p>
				</div>
			</div>

			<div class="card status-card card-error">
				<span class="card-title">Failed</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-warning-octagon"></i>
						</div>
					</div>

					<p class="status-name">Error state for failed actions or blocked flows.</p>
				</div>
			</div>

			<div class="card status-card card-info">
				<span class="card-title">Info</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-info"></i>
						</div>
					</div>

					<p class="status-name">Informational card for contextual metadata.</p>
				</div>
			</div>

			<div class="card status-card card-secondary">
				<span class="card-title">Queued</span>

				<div class="card-content">
					<div class="status-icon-container">
						<div class="status-icon">
							<i class="ph ph-clock"></i>
						</div>
					</div>

					<p class="status-name">Secondary state for queued or background work.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Cards HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;div class="card status-card card-success"&gt;
  &lt;span class="card-title"&gt;Status title&lt;/span&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="status-icon-container"&gt;
      &lt;div class="status-icon"&gt;
        &lt;i class="ph ph-check-circle"&gt;&lt;/i&gt;
        OK
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;p class="status-name"&gt;Primary status card.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>