<header class="page-header">
  <div class="page-header-content">
    <span class="page-header-kicker">Workspace</span>
    <h1 class="page-header-title">Projects overview</h1>
    <p class="page-header-subtitle">
      Track active work 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" type="button">Create</button>
  </div>
</header>

<header class="page-header page-header-compact page-header-accent">
  <div class="page-header-content">
    <h2 class="page-header-title">Billing settings</h2>
    <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>