<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/sh-icon.png" 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 device-action card-success">
				<span class="card-title">Device alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> ON
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-primary">
				<span class="card-title">Device alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i>
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-warning">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-error">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-info">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</p>
				</div>
			</div>

			<div class="card device-action card-secondary">
				<span class="card-title">device_alias</span>

				<div class="card-content">
					<div class="device-icon-container">
						<div class="device-online-status status-online">•</div>
						<div class="device-icon">
							<i class="ph ph-power"></i> OFF
						</div>
					</div>

					<p class="device-name">Device display name. Maby letters, many words</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 device-action card-success"&gt;
  &lt;span class="card-title"&gt;Device alias&lt;/span&gt;
  &lt;div class="card-content"&gt;
    &lt;div class="device-icon-container"&gt;
      &lt;div class="device-online-status status-online"&gt;•&lt;/div&gt;
      &lt;div class="device-icon"&gt;
        &lt;i class="ph ph-power"&gt;&lt;/i&gt;
        ON
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;p class="device-name"&gt;Kitchen Light&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>
</section>