<section class="section docs-section" id="page-header">
                  <h2 class="section-title">Page Header</h2>
                  <p class="docs-section-description">Page Header собирает заголовок экрана, короткое описание, статусные метки и основные действия.</p>
                  <div class="block">
                    <header class="page-header">
                      <div class="page-header-content">
                        <span class="page-header-kicker">Workspace</span>
                        <h3 class="page-header-title">Projects overview</h3>
                        <p class="page-header-subtitle">
                          Track active work, review critical states, and open the next action without leaving the page.
                        </p>
                        <div class="page-header-meta">
                          <span class="badge badge-success">Healthy</span>
                          <span>Updated 2 min ago</span>
                        </div>
                      </div>
                      <div class="page-header-actions">
                        <button class="btn btn-secondary btn-small" type="button">Export</button>
                        <button class="btn btn-accent btn-small with-icon" type="button">
                          <i class="ph ph-plus"></i>
                          Create
                        </button>
                      </div>
                    </header>
                  </div>
                  <div class="block">
                    <header class="page-header page-header-compact page-header-accent">
                      <div class="page-header-content">
                        <h3 class="page-header-title">Billing settings</h3>
                        <div class="page-header-meta">
                          <span class="badge badge-warning">Pending</span>
                          <span>3 changes waiting</span>
                        </div>
                      </div>
                      <div class="page-header-actions">
                        <button class="btn btn-primary btn-small" type="button">Review</button>
                        <button class="btn btn-danger btn-small" type="button">Discard</button>
                      </div>
                    </header>
                  </div>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Page Header 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;header class="page-header"&gt;
  &lt;div class="page-header-content"&gt;
    &lt;span class="page-header-kicker"&gt;Workspace&lt;/span&gt;
    &lt;h1 class="page-header-title"&gt;Projects overview&lt;/h1&gt;
    &lt;p class="page-header-subtitle"&gt;
      Track active work and open the next action without leaving the page.
    &lt;/p&gt;
    &lt;div class="page-header-meta"&gt;
      &lt;span class="badge badge-success"&gt;Healthy&lt;/span&gt;
      &lt;span&gt;Updated 2 min ago&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="page-header-actions"&gt;
    &lt;button class="btn btn-secondary btn-small" type="button"&gt;Export&lt;/button&gt;
    &lt;button class="btn btn-accent btn-small" type="button"&gt;Create&lt;/button&gt;
  &lt;/div&gt;
&lt;/header&gt;</code></pre>
	</div>
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Compact Header 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;header class="page-header page-header-compact page-header-accent"&gt;
  &lt;div class="page-header-content"&gt;
    &lt;h2 class="page-header-title"&gt;Billing settings&lt;/h2&gt;
    &lt;div class="page-header-meta"&gt;
      &lt;span class="badge badge-warning"&gt;Pending&lt;/span&gt;
      &lt;span&gt;3 changes waiting&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="page-header-actions"&gt;
    &lt;button class="btn btn-primary btn-small" type="button"&gt;Review&lt;/button&gt;
    &lt;button class="btn btn-danger btn-small" type="button"&gt;Discard&lt;/button&gt;
  &lt;/div&gt;
&lt;/header&gt;</code></pre>
	</div>
</section>