<section class="section docs-section" id="lists">
                  <h2 class="section-title">Lists</h2>
                  <p class="docs-section-description">Списки покрывают обычные перечни, навигацию, definition list и строки с действиями. Для интерактивных пунктов используй &#96;.list-nav&#96;, &#96;.list-action&#96;, &#96;.list-label&#96; и &#96;.list-meta&#96;.</p>
                  <div class="block">
                    <h3 class="block-title">Unordered list</h3>
                    <ul class="list">
                      <li class="list-item">Dashboard</li>
                      <li class="list-item">Projects</li>
                      <li class="list-item">Reports</li>
                      <li class="list-item">Automations</li>
                      <li class="list-item">Settings</li>
                    </ul>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Ordered list</h3>
                    <ol class="list list-ordered">
                      <li class="list-item">Create workspace</li>
                      <li class="list-item">Invite team</li>
                      <li class="list-item">Configure permissions</li>
                      <li class="list-item">Verify status</li>
                    </ol>
                  </div>
                  <div class="block">
                    <h3 class="block-title">List with icons</h3>
                    <ul class="list with-icons">
                      <li class="list-item"><i class="ph ph-bathtub"></i> Bathroom</li>
                      <li class="list-item"><i class="ph ph-toilet"></i> Toilet</li>
                      <li class="list-item"><i class="ph ph-planet"></i> Workspace</li>
                    </ul>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Definition list</h3>
                    <dl class="list list-definition">
                      <div class="list-row">
                        <dt class="list-term">Item</dt>
                        <dd class="list-desc">Базовая сущность интерфейса</dd>
                      </div>
                      <div class="list-row">
                        <dt class="list-term">Group</dt>
                        <dd class="list-desc">Логическая группа элементов</dd>
                      </div>
                      <div class="list-row">
                        <dt class="list-term">Flow</dt>
                        <dd class="list-desc">Набор действий, выполняемых последовательно</dd>
                      </div>
                    </dl>
                  </div>
                  <div class="block">
                    <h3 class="block-title">Navigation / interactive list</h3>
                    <ul class="list list-nav">
                      <li class="list-item list-item-active">
                        <button class="list-action" type="button">
                          <span class="list-label">Overview</span>
                        </button>
                      </li>
                      <li class="list-item">
                        <button class="list-action" type="button">
                          <span class="list-label"><i class="ph ph-stack"></i> Projects</span>
                          <span class="list-meta">12</span>
                        </button>
                      </li>
                      <li class="list-item">
                        <button class="list-action" type="button">
                          <span class="list-label">Logs</span>
                        </button>
                      </li>
                      <li class="list-item list-item-disabled">
                        <button class="list-action" type="button" disabled>
                          <span class="list-label">Advanced</span>
                        </button>
                      </li>
                    </ul>
                  </div>
                  <div class="block">
                    <h3 class="block-title">List with actions</h3>
                    <ul class="list list-actions">
                      <li class="list-item">
                        <div class="list-content">
                          <div class="list-title">Release Plan</div>
                          <div class="list-subtitle">
                            <span class="text-color-success">•</span>
                            192.168.2.21
                          </div>
                        </div>
                        <div class="list-controls">
                          <button class="btn btn-small btn-secondary" type="button">Open</button>
                          <button class="btn btn-small btn-accent" type="button">Toggle</button>
                        </div>
                      </li>
                      <li class="list-item">
                        <div class="list-content">
                          <div class="list-title">Analytics Sync</div>
                          <div class="list-subtitle">
                            <span class="text-color-success">•</span>
                            192.168.2.34
                          </div>
                        </div>
                        <div class="list-controls">
                          <button class="btn btn-small btn-secondary" type="button">Open</button>
                          <button class="btn btn-small btn-danger with-icon" type="button">
                            <i class="ph ph-arrow-clockwise"></i>
                            Restart
                          </button>
                        </div>
                      </li>
                      <li class="list-item list-item-muted">
                        <div class="list-content">
                          <div class="list-title">Archive Job</div>
                          <div class="list-subtitle">
                            <span class="text-color-warning">•</span> Offline
                          </div>
                        </div>
                        <div class="list-controls">
                          <button class="btn btn-small btn-secondary" type="button" disabled>Open</button>
                          <button class="btn btn-small btn-accent" type="button" disabled>Toggle</button>
                        </div>
                      </li>
                    </ul>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Navigation 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;ul class="list list-nav"&gt;
  &lt;li class="list-item list-item-active"&gt;
    &lt;button class="list-action" type="button"&gt;
      &lt;span class="list-label"&gt;
        &lt;i class="ph ph-lightbulb"&gt;&lt;/i&gt;
        Projects
      &lt;/span&gt;
      &lt;span class="list-meta"&gt;12&lt;/span&gt;
    &lt;/button&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
	</div>
</section>