<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">
                    <GnDescriptionList :items="details">
                      <template #status="{ item }">
                        <span class="badge badge-success">Online</span>
                        <span class="description-list-value-muted">All checks passed</span>
                      </template>
                      <template #owner="{ item }">
                        <code class="code">@design</code>
                      </template>
                    </GnDescriptionList>
                  </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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></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>