<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="code-example-copy" type="button">Copy</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="code-example-copy" type="button">Copy</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>