<section class="section docs-section" id="description-list">
	<h2 class="section-title">Key-Value</h2>
	<p class="docs-section-description">
		Description List подходит для read-only деталей сущности: ID, владельцы, статусы, даты и короткие metadata values.
	</p>

	<div class="block">
		<dl class="description-list">
			<div class="description-list-row">
				<dt class="description-list-term">Project</dt>
				<dd class="description-list-value">Website Redesign</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Status</dt>
				<dd class="description-list-value">
					<span class="badge badge-success">Online</span>
					<span class="description-list-value-muted">All checks passed</span>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Owner</dt>
				<dd class="description-list-value">
					<code class="code">@design</code>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Updated</dt>
				<dd class="description-list-value">2026-04-11 22:12</dd>
			</div>
		</dl>
	</div>

	<div class="block">
		<dl class="description-list description-list-compact">
			<div class="description-list-row">
				<dt class="description-list-term">Run ID</dt>
				<dd class="description-list-value">
					<code class="code">run_1048</code>
				</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Runtime</dt>
				<dd class="description-list-value">18s</dd>
			</div>
			<div class="description-list-row">
				<dt class="description-list-term">Result</dt>
				<dd class="description-list-value">
					<span class="badge badge-secondary">Queued</span>
				</dd>
			</div>
		</dl>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Description List HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;dl class="description-list"&gt;
  &lt;div class="description-list-row"&gt;
    &lt;dt class="description-list-term"&gt;Project&lt;/dt&gt;
    &lt;dd class="description-list-value"&gt;Website Redesign&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div class="description-list-row"&gt;
    &lt;dt class="description-list-term"&gt;Status&lt;/dt&gt;
    &lt;dd class="description-list-value"&gt;
      &lt;span class="badge badge-success"&gt;Online&lt;/span&gt;
      &lt;span class="description-list-value-muted"&gt;All checks passed&lt;/span&gt;
    &lt;/dd&gt;
  &lt;/div&gt;
&lt;/dl&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Compact List HTML</span>
			<button class="code-example-copy" type="button">Copy</button>
		</div>
		<pre><code class="language-html">&lt;dl class="description-list description-list-compact"&gt;
  &lt;div class="description-list-row"&gt;
    &lt;dt class="description-list-term"&gt;Run ID&lt;/dt&gt;
    &lt;dd class="description-list-value"&gt;&lt;code class="code"&gt;run_1048&lt;/code&gt;&lt;/dd&gt;
  &lt;/div&gt;
  &lt;div class="description-list-row"&gt;
    &lt;dt class="description-list-term"&gt;Runtime&lt;/dt&gt;
    &lt;dd class="description-list-value"&gt;18s&lt;/dd&gt;
  &lt;/div&gt;
&lt;/dl&gt;</code></pre>
	</div>
</section>